Vue Js check box set default checked/selected
Vue Js checkbox set default checked: In Vue.js, you can set the default value for a checkbox to be checked by binding the "checked" attribute to an array in your component's data and using the "v-model" directive to bind the value of each checkbox to an element in the array.In this tutorial, we will learn how to check the checkbox by default.




Thanks for your feedback!
Your contributions will help us to improve service.
How to set checkbox default checked in Vue Js?
In this example, the "selectedOptions" data property is set to ["vue"]
, so the vue checkboxes will be checked by default. The "v-model" directive binds the value of each checkbox to an element in the "selectedOptions" array, so when the user checks or unchecks a checkbox, the "selectedOptions" array will be updated accordingly.
Vue Js checkbox default checked
xxxxxxxxxx
<div id="app">
<div v-for="(item,index) in items">
<input :value="item" type="checkbox" v-model="selectedOptions"/>
{{item}}
</div>
<pre>Selected item: {{selectedOptions}} </pre>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
selectedOptions: ["Vue"],
items: ["Vue","React","Angular","Node","Express","Php","Bootstrap",],
};
},
methods: {},
}).mount("#app");
</script>