Reputation: 31
I am trying to get one checkbox to uncheck another (kinda like radio buttons). I am a little bit of a Vue noob so I am not sure what I am doing wrong. Here are the two inputs.
<label for="'product-'+product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="checkbox"
:id="'product-'+product.id"
:value="false"
v-model="selected"/>
<div class="v-center">None</div>
</label>
<label :for="'product-'+product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<div class="checkbox-container">
<input class=""
type="checkbox"
:value="true"
:id="'product-'+product.id"
v-model="selected"/>
</div>
Upvotes: 2
Views: 2401
Reputation: 7729
If you absolutely need to use checkboxes instead of radio inputs, you can reverse the true-value
and false-value
props of one input. This way it will mimic the behavior of the radio buttons.
new Vue({
el: "#app",
data: {
selected: false
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label for="first_input"
>False</label>
<input
type="checkbox"
id="first_input"
v-model="selected"
:true-value="false"
:false-value="null"/>
<label for="second_input"
>True</label>
<input
type="checkbox"
id="second_input"
v-model="selected"
:false-value="null"/>
<br/>
Input value: {{ selected }}
</div>
Upvotes: 1
Reputation: 1409
Well, I think that using two variables will be a good approach to have this behavior (checkbox like radio buttons).
There are two methods setInitial and setEnd, each one clear the another input, but the checkbox behavior still the same, so you can clear or reset the inputs by clicking the same input twice.
new Vue({
el: "#app",
data: {
initial: false,
end: false
},
methods: {
setInitial: function(){
this.end = false
},
setEnd: function(){
this.initial = false
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label
class="none addon_label"
:class="{'addon_selected': !initial}"
>Initial</label>
<input
type="checkbox"
v-model="initial"
@click="setInitial"
/>
==#==
<label
class="is_flex addon_label"
:class="{'addon_selected': end}"
>End</label>
<input
type="checkbox"
v-model="end"
@click="setEnd"
/>
<hr>
Initial {{ initial }} - End {{ end }}
<hr>
</div>
Please run the snippet and test this solution
Upvotes: 1
Reputation: 103
You can try this.
<label for="'product-'+product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="radio"
:id="'product-'+product.id"
:value="checkStatus"
@change="check($event.target.value)"/>
<div class="v-center">None</div>
</label>
<label :for="'product-'+product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<div class="checkbox-container">
<input class=""
type="radio"
:value="checkStatus"
:id="'product-'+product.id"
@change="check($event.target.value)/>
</div>
In your script of component, you can define method check() inside of methods.
<script>
export default {
data() {
return {
checkStatus: false
}
},
methods: {
check: function(val) {
this.checkStatus = !val;
}
},
}
</script>
Upvotes: 0
Reputation: 23480
You can use radio buttons instead of checkbox:
new Vue({
el: "#demo",
data() {
return {
product: {id: 1},
selected: false
}
}
})
.addon_selected {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<label for="'product-'+product.id"
class="none addon_label"
:class="{'addon_selected': !selected}"
>
<input class=""
type="radio"
:id="'product-'+product.id"
:value="false"
v-model="selected"/>
</label>
<label :for="'product-'+product.id"
class="is_flex addon_label"
:class="{'addon_selected': selected}"
:data-product-id="product.id">
<input class=""
type="radio"
:value="true"
:id="'product-'+product.id"
v-model="selected"/>
</label>
</div>
Upvotes: 2