VueJS: как включить «развал» разных компонентов?(если X - показать, то Y - скрыть, наоборот) - PullRequest
Новая
       5

VueJS: как включить «развал» разных компонентов?(если X - показать, то Y - скрыть, наоборот)

0 голосов
/ 21 ноября 2018

Я очень новичок в VueJS и пытаюсь реорганизовать старый сайт в VueJS 2. Моя первая проблема - как воспроизвести то, что я сделал в JQuery, где:

если отображается компонент X ''true, тогда компонент Y' display 'равен false, и наоборот.

По сути, если я нажимаю кнопку, чтобы развернуть элемент bc collapse "cccollapse", то я хочу, чтобы элемент "szcollapse"свернуть (если он развернут) и наоборот, поэтому только один из этих разборных элементов «расширяется» в данный момент времени.

Я использую bootstrap-vue в моем проекте Vue, и это то, чтотекущий шаблон выглядит следующим образом: 

<template>
  <div>
    <b-container fluid class="button-row">
    <fieldset>
      <legend class="scheduler-border">
        <span class="legend-label">YOU : MANAGE YOUR KEYS</span>
        </legend>
        <b-row class="menu-row">
            <b-col>
                <b-button variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-plus-circle"></i>REQUEST A KEY</b-button>
            </b-col>
        </b-row>
        <b-row class="menu-row">
            <b-col>
                <b-button v-b-toggle.szcollapse v-on:click="collapseCCCollapse" variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-share-square"></i>ISSUE A KEY</b-button>
                <b-collapse ref="szcollapse" id="szcollapse" class="mt-2">
                  <b-container class="container-sz-login">
                    <b-row class="cred-dropdown">
                      <b-col>
                        <b-input-group>
                          <span class="input-group-text" id="basic-addon1">
                              <i class="fas fa-user-circle fa-fw"></i>
                          </span>
                          <b-form-input id="txtUsername" />
                        </b-input-group>
                      </b-col>
                    </b-row>
                    <b-row class="cred-dropdown">
                      <b-col>
                        <b-input-group>
                          <span class="input-group-text" id="basic-addon1">
                              <i class="fas fa-lock fa-fw"></i>
                          </span>
                          <b-form-input type="password" id="txtPassword" />
                        </b-input-group>
                      </b-col>
                    </b-row>
                    <b-row class="cred-dropdown">
                      <b-col cols="2"/>
                      <b-col cols="8">
                        <b-button variant="primary" id="szlogin" size="lg" block >LOGIN<i style="padding-left:5px;" class="fas fa-sign-in-alt"></i></b-button>
                      </b-col>
                      <b-col cols="2"/>
                    </b-row>
                  </b-container>
                </b-collapse>
            </b-col>
        </b-row>
        <b-row class="menu-row">
            <b-col>
                <b-button v-b-toggle.cccollapse v-on:click="collapseSZCollapse" variant="primary" size="lg" block class="text-left button-custom"><i style="padding-right:10px;padding-left:30%;" class="fas fa-network-wired"></i>MANAGE YOUR KEYS</b-button>
                <b-collapse ref="cccollapse" id="cccollapse" class="mt-2" v-model="showCollapse">
                  <b-container class="container-sz-login">
                    <b-row class="cred-dropdown">
                      <b-col>
                        <b-input-group>
                          <span class="input-group-text" id="basic-addon1">
                              <i class="fas fa-user-circle fa-fw"></i>
                          </span>
                          <b-form-input  id="txtCorpId"/>
                        </b-input-group>
                      </b-col>
                    </b-row>
                    <b-row class="cred-dropdown">
                      <b-col>
                        <b-input-group>
                          <span class="input-group-text" id="basic-addon1">
                              <i class="fas fa-lock fa-fw"></i>
                          </span>
                          <b-form-input type="password" id="txtCorpPwd"/>
                        </b-input-group>
                      </b-col>
                    </b-row>
                    <b-row class="cred-dropdown">
                      <b-col cols="2"/>
                      <b-col cols="8">
                        <b-button variant="primary" id="ccLogin" size="lg" block >LOGIN<i style="padding-left:5px;" class="fas fa-sign-in-alt"></i></b-button>
                      </b-col>
                      <b-col cols="2"/>
                    </b-row>
                  </b-container>
                </b-collapse>
            </b-col>
        </b-row>
    </fieldset>
    </b-container>
  </div>
</template>

И это сценарий: 

<script>
export default {
  name: "Menu",
  props: {
    msg: String
  },
  methods: {
    collapseSZCollapse : function() {
      console.log('this.$refs.szcollapse : ' + this.$refs.szcollapse.collapsed);
    },
    collapseCCCollapse : function() {
      console.log('this.$refs.cccollapse : ' + this.$refs.cccollapse.collapsed)
    }
  },
  data() {
    return {
      showCollapse: false
    };
  }
};
</script>

Очевидно, что скрипт на самом деле ничего не делает в методах - я просто пытаюсь увидетькак получить значение текущего элемента для принятия решения при вызове v-on: click.

Как правильно VueJS сделать это?Я понимаю (вроде), что vuejs управляется данными, но я не уверен, как получить данные от одного элемента, чтобы управлять состоянием другого.

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Вы можете присвоить элементу b-collapse привязку v-модели.Вот пример jsfiddle . 

new Vue({
  el: "#app",
  data: {
    firstCollapsed: true,
    secondCollapsed: false
  },
  methods: {
    alternateCollapse() {
      if (this.firstCollapsed) {
      	this.firstCollapsed = false;
        this.secondCollapsed = true;
      } else {
      	this.firstCollapsed = true;
        this.secondCollapsed = false;
      }
    }
  }
});
<div id="app">
  <b-collapse v-model="firstCollapsed" id="collapse1">
    <div>Inner Element 1</div>
  </b-collapse>
  <b-collapse v-model="secondCollapsed" id="collapse2">
    <div>Inner Element 2</div>
  </b-collapse>
  <b-btn @click="alternateCollapse()">Alternate Collapse</b-btn>
</div>

<style scoped>
  .collapse {
    margin: 5px;
    padding: 5px;
    background-color: lightgray;
  }

  #collapse1 {
    border: 1px solid red;
  }
  
  #collapse2 {
    border: 1px solid blue;
  }
</style>
0 голосов
/ 21 ноября 2018

Вздох.Если бы я действительно расследовал правильно ...

https://bootstrap -vue.js.org / docs / components / collapse / # accordion-support

Это точночто я хочу.

Все еще рад услышать другие программные ответы, если они есть?

...