如何在vuejs中启用禁用组件

我正在开发一个小应用程序VueJs我有一个div元素，并试图显示元素，如果数据值为1，并隐藏如果数据值为0，为此I “M具有v模型withClient是这样的：如何在vuejs中启用禁用组件

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

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

来源

2017-08-15 Nitish Kumar

这其实很简单，你应该使用

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/[email protected]"></script> 
 
<script src="https://unpkg.com/[email protected]"></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>

来源

2017-08-15 08:35:01 kevguy

@Nitish Kumar我也注意到你修改了计算属性中的'clientParticipants'，更好地分离了更好的调试逻辑。 – kevguy

谢谢..它有帮助 –

我认为隐藏输入，V模型的目的是要建立一个双向绑定，在这种情况下，更好的做法是使用 <input type="hidden" :value="someData" >

来源

2017-08-15 08:18:58 sachin

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

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>

来源

2017-08-15 08:21:16

我使用'v型模型= “withClient”'因为我需要它，而存储数据库。 –

你可以添加'v-model =“withClient”'。对不起。 –

如何在vuejs中启用禁用组件

回答

相关问题