{"id":13449,"date":"2025-09-11T07:22:36","date_gmt":"2025-09-11T07:22:36","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13449"},"modified":"2025-09-11T07:24:01","modified_gmt":"2025-09-11T07:24:01","slug":"vuejs-model-for-checkbox-group","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/vuejs-model-for-checkbox-group","title":{"rendered":"VueJS Model for Checkbox Group"},"content":{"rendered":"<p>Here\u2019s the Vue.js solution (Composition API with ref) along with <strong>step-by-step documentation<\/strong>. It updates the list of saved checkboxes based on user interaction (checking adds to the array, unchecking removes it.)<\/p>\n<h3>Step 1: Import and initialize reactive variables<\/h3>\n<p>Import the ref function from vue and define two variables:<\/p>\n<ul>\n<li>possibleCheckboxes: holds the list of all possible checkbox options.<\/li>\n<li>savedCheckboxes: a reactive array that stores checked values.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"swift\">import { ref } from 'vue';\r\nconst possibleCheckboxes = [\"apple\", \"banana\", \"orange\", \"grape\"];\r\nconst savedCheckboxes = ref([\"banana\", \"orange\"]);<\/pre>\n<h3>Step 2: Display checkboxes using v-for<\/h3>\n<p>Loop through the possibleCheckboxes array using v-for and display a checkbox for each item.<\/p>\n<pre class=\"lang:adddarkplain\">&lt;template&gt;\r\n &lt;div v-for=\"item in possibleCheckboxes\" :key=\"item\"&gt;\r\n   &lt;label&gt;\r\n     &lt;input\r\n       type=\"checkbox\"\r\n       :value=\"item\"\r\n       :checked=\"savedCheckboxes.includes(item)\"\r\n       @change=\"onCheckboxChange(item, $event.target.checked)\"\r\n     \/&gt;\r\n     {{ item }}\r\n   &lt;\/label&gt;\r\n &lt;\/div&gt;\r\n&lt;\/template&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"swift\"><\/pre>\n<h3>Step 3: Handle checkbox changes<\/h3>\n<p>Create a method onCheckboxChange(value, isChecked) that:<\/p>\n<ul>\n<li><strong>Adds <\/strong>the value to savedCheckboxes if it&#8217;s checked.<\/li>\n<li><strong>Removes <\/strong>it if it&#8217;s unchecked.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"swift\">function onCheckboxChange(value, isChecked) {\r\n if (isChecked) {\r\n   if (!savedCheckboxes.value.includes(value)) {\r\n     savedCheckboxes.value.push(value);\r\n   }\r\n } else {\r\n   savedCheckboxes.value = savedCheckboxes.value\r\n                             .filter((v) =&gt; v !== value);\r\n }\r\n}\r\n<\/pre>\n<h2>Summary \/ Note<\/h2>\n<ul>\n<li><span style=\"font-weight: 400;\">This setup allows dynamic two-way interaction with checkboxes in Vue 3 using the Composition API.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">savedCheckboxes<\/span><span style=\"font-weight: 400;\"> array always reflects the current selection state and updates automatically as users check or uncheck boxes.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You can use this array to persist data to a server, populate a form, or enable\/disable features conditionally.<\/span><\/li>\n<li>Make sure to use <span>ref()<\/span><span> for reactive arrays and access them via <\/span><span>.value<\/span><span> in the <\/span><span>&lt;script setup&gt;<\/span><span> context.<\/span><\/li>\n<\/ul>\n<p><strong>Tip:<\/strong> If you&#8217;re saving to a backend, watch savedCheckboxes with watch() or trigger an API call inside onCheckboxChange.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/unit-testing-with-jest-vue-test-utils\" target=\"_blank\">Unit Testing Vue Components<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s the Vue.js solution (Composition API with ref) along with step-by-step documentation. It updates the list of saved checkboxes based on user interaction (checking adds to the array, unchecking removes it.) Step 1: Import and initialize reactive variables Import the ref function from vue and define two variables: possibleCheckboxes: holds the list of all possible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13450,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-13449","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13449"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13449"}],"version-history":[{"count":3,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13449\/revisions"}],"predecessor-version":[{"id":13453,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13449\/revisions\/13453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13450"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}