How to hide / show component in vuejs - vue.js

Question

I'm developing a small application in VueJs where I'm having a div element and trying to show element if the data value is 1 and hide if the data value is 0, for this I'm having v-model as withClient something like 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 the element which needs to be 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 as withClientSelection:
withClientSelection() {
if(this.withClient === 0)
{
this.clientParticipants = ''
return false
}
else
{
return true
}
}
But somehow I'm not able to get this. Help me on this. Thanks

Answer 1

It's actually very simple, you should use
this.withClient === '0'
instead of
this.withClient === 0
I also overlooked this part and verified your code myself first, here's a fully working example that I 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>

Answer 2

I think the intention with v-model on hidden inputs is to set up a one-way binding, in which case it's much better to use
<input type="hidden" :value="someData" >

Answer 3

You can try this, it will help you to solve your problem.
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>