CODEWITHSUNDEEP
vue.jsvuejs2
Henry Oladeji
Henry Oladeji

Reputation: 47

Vuejs Checkbox Array

I have an array of menus with roles like this

d_active: 0
href: "/main-clients"
icon: null
id: 155
menu_actions: 1
menu_id: 1
name: "Clients"
parent_id: 173
roles: [{id: 1, name: "admin", guard_name: "web", created_at: "2021-10-18T08:51:20.000000Z",…},…]
0: {id: 1, name: "admin", guard_name: "web", created_at: "2021-10-18T08:51:20.000000Z",…}
1: {id: 6, name: "dev", guard_name: "web", created_at: "2021-11-15T11:16:21.000000Z",…}
sequence: 408
service_id: null
slug: "link"

and also i have array of actions like this

actions: [{id: "1", name: "Edit"}, {id: "2", name: "View"}, {id: "3", name: "Add"}, {id: "4", name: "Delete"}]
0: {id: "1", name: "Edit"}
id: "1"
name: "Edit"
1: {id: "2", name: "View"}
2: {id: "3", name: "Add"}
3: {id: "4", name: "Delete"}

i then tried to loop it using v-for like this

<tr v-for="role in menu.roles" v-bind:key="role.id">
    <td>{{role.name}}</td>
    <td v-for="action in actions" :key="action.id">
   <input type="checkbox" :value="action.id" v-model="form.actions">
    </td>
</tr>

The problem is that anytime i click one check box 2 or more get clicked which is not what i want. What i want is to be a able to click one checkbox and also submit it to the API responsible.

Upvotes: 0

Views: 2208

Answers (2)

gru
gru

Reputation: 3069

This won't work:

v-model="form.actions"

In your v-for loop, you should use the current iteration's action and bind the checkbox to a boolean property, e.g. action.checked.

<td v-for="action in actions" :key="action.id">
  <input type="checkbox" :value="action.id" v-model="action.checked">
</td>

Read more here: https://v2.vuejs.org/v2/guide/forms.html#Checkbox

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Working Demo :

new Vue({
  el: '#app',
  data: {
    actions: [{id: "1", name: "Edit"}, {id: "2", name: "View"}, {id: "3", name: "Add"}, {id: "4", name: "Delete"}],
    roles: [{id: 1, name: "admin"}]
  },
  methods: {
    check (e) {
  this.$nextTick(() => {
    if (e.target.checked) {
        console.log(e.target.value) // Pass this value in API
    }
  })
}
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
  <tr v-for="role in roles" :key="role.id">
    <td v-for="action in actions" :key="action.id">
       {{action.name}} : <input type="checkbox" :value="action.id" v-model="action.checked" @change="check">
    </td>
  </tr>
  </table>
</div>

Upvotes: 1

Related Questions