Multiple Checkboxes in Vue Vuetify
In this post I am going to share with you how to create multiple checkboxes using Vue and Vuetify . Also inserting and removing checkbox values in an array.
Below are the snapshots of what we are trying to achieve.
1: We have the unticked checkboxes and an empty array.
2: When we select a value, it is inserted in the array, you can see that the name John Doe is selected and inserted in array.
3: When we select multiple values they are also inserted in array.
4: We are able to remove values from an array once we unselect the value as shown below
Now its time to code :)
You need to create a Vuetify list component, see this to do so.
Once you have the list component running, let’s follow the steps below to accomplish our mission.
Step 1: Populating the list-item.
In your list-item include the v-for. The v-for directive is a Vue.js directive used to loop over a data usually an array or object. More details on how to use if click here. In this example, the directive’s value syntax is student in students, where student is an alias in expression to provide an alias for the current element being iterated on.
Step 2: Populating the checkbox
We need to add the checkbox component. Give the v-model the value of an array. If you don't specify the value( :value=”student”), you wont have a specific value. Every time you you check a box , the value selected will replace the previous value. To avoid that in this example, :value = student.display.
Step 3: Displaying data in the list
Add another list-item-content in your list component to access loop through the data in your array.
Below is the full Vue Vuetify code:
Lets now code in Typescript
Step 1: We are going to create an array called selected. This array will be used to store the value selected of the checkbox.
Step 2: We are going to create another array of objects called students of type any. The objects will have a return which will be holding a unique value and a display. After the array is created we need to populate it with data. Below is dummy data that is used in this example.
The snippet below shows the full Typescript code
If you find the tutorial helpful, a clap will be appreciated. Find the full code here.
Happy coding.
