如何在 vuejs 中隐藏/显示组件

Question

我正在VueJs 开发一个小型应用程序，其中有一个 div 元素，如果数据值为 1 则尝试显示元素，如果数据值为 0 则隐藏，为此我有 v-模型为withClient 是这样的：

<div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="1" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="0">
        <label>
            No
        </label>
    </div>
</div>

以及需要隐藏的元素：

<div class="col-sm-6">
    <label class="col-sm-3 control-label">Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection">
        <v-select
                multiple
                :options="contactClients"
                :on-search="getOptions"
                placeholder="Client name"
                v-model="clientParticipants">
        </v-select>
    </div>
</div>

我将属性计算为withClientSelection：

withClientSelection() {
    if(this.withClient === 0)
    {
        this.clientParticipants = ''
        return false
    }
    else
    {
        return true
    }
}

但不知何故，我无法得到这个。帮我解决这个问题。谢谢

Answer 1

其实很简单，你应该用

this.withClient === '0'

而不是

this.withClient === 0

我也忽略了这部分并首先自己验证了您的代码，这是我使用的一个完整的工作示例。

Vue.component('v-select', VueSelect.VueSelect);

const app = new Vue({
  el: '#app',
  data: {
    withClient: '0',
    clientParticipants: '',
    dummyData: ['Aaron', 'Bart', 'Charles', 'Dora', 'Edward', 'Flora', 'Gladys', 'Heidi', 'Iris', 'Jason'],
    contactClients: []
  },
  computed: {
    withClientSelection() {
      if (this.withClient === '0') {
        return false
      }
      return true
    }
  },
  watch: {
    withClient(newVal) {
      if (newVal === 0) {
        this.clientParticipants = '';
      }
    }
  },
  methods: {
    getOptions(search, loading) {
      /*
      loading(true)
      this.$http.get('https://api.github.com/search/repositories', {
         q: search
      }).then(resp => {
         this.contactClients = resp.data.items
         loading(false)
      })
      */
      this.contactClients = this.dummyData
        .filter((name) => name.toLowerCase().indexOf(search.toLowerCase()) >= 0);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<div id="app">
  <div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="1" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="0">
        <label>
            No
        </label>
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-3 control-label">Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection === true">
        <v-select
                multiple
                :options="contactClients"
                :on-search="getOptions"
                placeholder="Client name"
                v-model="clientParticipants">
        </v-select>
    </div>
  </div>
  <div class="col-sm-6">
    <label class="col-sm-3 control-label">Selected Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection === true">
      {{clientParticipants}}
    </div>
  </div>
</div>

Answer 2

我认为在隐藏输入上使用 v-model 的目的是设置单向绑定，在这种情况下使用会更好 <input type="hidden" :value="someData" >

Answer 3

你可以试试这个，它会帮助你解决你的问题。

new Vue({
  el: '#app',
  data: {
    clientParticipants: '',
    withClientSelection: 1
  },
  methods: {
    checkMe: function(type) {
    return this.withClientSelection = type
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" @change="checkMe(1)" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" @change="checkMe(0)">
        <label>
            No
        </label>
    </div>
</div>
<div class="col-sm-6">
    <label class="col-sm-3 control-label">Clients:</label>
    <div class="col-sm-8" v-if="withClientSelection">
      Display now!
        <v-select
                multiple
                :options="contactClients"
                :on-search="getOptions"
                placeholder="Client name"
                v-model="clientParticipants">
        </v-select>
    </div>
</div>
</div>