In vue2 js, I want to use a checkbox with a v-model.
<input type="checkbox" value="test" :checked="selected"/>
I want the value of the checkbox to be test, however I want the 2 way binding with the prop called selected which is a boolean. However the above only does 1 way binding. How can I fix this?
Use v-model instead of :checked
new Vue({
el: '#app',
data: {
selected: false
}
});<script src="https://unpkg.com/vue@2"></script>
<div id="app">
<input type="checkbox" value="test" v-model="selected">
<div>Selected: {{selected}}</div>
</div>In vue you can use "true-value" and "false-value":
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no" />
or
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue" />
To set up a checkbox with two-way binding in Vue 2, use v-model directly. Here’s a simple way to do it:
<template>
<div>
<input type="checkbox" v-model="isChecked" />
<p>Checked: {{ isChecked }}</p>
</div>
</template>
<script>
export default {
data() {
return {
isChecked: false // Initial state of the checkbox
};
}
};
</script>
<input type="checkbox" name="vehicle3" value="Boat" checked>andv-modelseems to alter thevalueattribute. So how would that work when thecheckedattribute needs to be 2-way bind?