Vuejs Checkbox Array

Question

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.

Rohìt Jíndal · Accepted Answer · 2022-01-26 15:44:51Z

1

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>

answered Jan 26, 2022 at 15:44

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 01:33:09Z

0

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

edited Jul 15, 2022 at 1:33

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 26, 2022 at 14:58

gru

3,2197 gold badges29 silver badges47 bronze badges

2 Comments

Henry Oladeji Over a year ago

got this error

You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instea

gru Over a year ago

You should bind the v-model (i.e. checked or not checked) to a property of action. I updated my answer.

Collectives™ on Stack Overflow

Vuejs Checkbox Array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related