vue.js - How to enable disable component in vuejs -
i'm developing small application in vuejs
i'm having div element , trying show element if data value 1 , hide if data value 0, i'm having v-model withclient
this:
<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>
and element needs hidden:
<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>
i've computed property withclientselection
:
withclientselection() { if(this.withclient === 0) { this.clientparticipants = '' return false } else { return true } }
but somehow i'm not able this. me on this. thanks
it's simple, should use
this.withclient === '0'
instead of
this.withclient === 0
i overlooked part , verified code myself first, here's working example used.
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>
Comments
Post a Comment