Question

我正在VueJs开发一个小应用程序，我有一个div元素，如果数据值为1则尝试显示元素，如果数据值为0则隐藏，为此我有v-model为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

我认为v-model对隐藏输入的意图是设置单向绑定，在这种情况下使用它会好得多 @RequestMapping(value = "http://yourCorporation.com/{clienId}/api/customers", method = RequestMethod.GET) Customers getCustomers(@PathVariable("clienId") Long clientId) { return customerService.findCustomerByClientId(clientId); }

Answer 2

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

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>

Answer 3

实际上非常简单，你应该使用

this.withClient === '0'

而不是

this.withClient === 0

我也忽略了这部分并首先验证了你的代码，这里是我用过的一个完整的例子。

＆＃13;

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);
    }
  }
});

＆＃13;

<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>

＆＃13;

如何在vuejs中启用禁用组件

3 个答案: