Vue js v-model different checkboxes

Question

I'm a bit new with Vue Js. I'm trying to obtain the boolean value of each checkbox from a Vue component, but when I check one, the rest ones are checked as well, so I can check just one. I've try it with computed but no results.

<v-card>
       <v-layout row wrap class="text-xs-center" v-for="ingredient in ingredients" :key="ingredient.id">
           <v-layout column>
                  <v-flex xs6>
                     <v-checkbox color="light-blue lighten-2" v-bind:label="`${ingredient.name}`" v-model="checked" light></v-checkbox>
                          </v-flex>
                      </v-layout>
                      <v-layout column>
                          <v-flex xs6>
                              <v-subheader>{{ingredient.price}} €</v-subheader>
                          </v-flex>
                      </v-layout>
                  </v-layout>
        </v-card>

        export default {
            data: () => ({

                checked: [],
                checked1: '',
                ingredients: [{
                    id: 1,
                    name: "tomato",
                    price: 2
                }, {
                    id: 2,
                    name: "Cheese",
                    price: 2.0
                }, {
                    id: 3,
                    name: "Frankfurt",
                    price: 2.25
                }, {
                    id: 4,
                    name: "Mushrooms",
                    price: 1.6
                }, {
                    id: 5,
                    name: "Pepper",
                    price: 2.5
                }, {
                    id: 1,
                    name: "Ham",
                    price: 2.75
                }],

            }),
            computed: {
                checked() {
                    return this.checked
                }
            }
        }

Libby · Accepted Answer · 2017-09-05 23:36:31Z

4

Try setting a checked value on each ingredient item:

ingredients: [{
  id: 1,
  name: "tomato",
  price: 2,
  checked: false
}]

And then you can set the value on the checkbox in the for-loop like this:

<v-checkbox v-model="ingredient.checked"></v-checkbox>

answered Sep 5, 2017 at 23:36

Libby

1,02211 silver badges18 bronze badges

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

Comments

Dazzle · Accepted Answer · 2019-01-17 14:29:59Z

-1

Simply bind :id and :value to an array

<div v-for="item, i in items>
   <input type="checkbox" :id="i" :value="i" v-model="checked" />
</div>

export default {
  data() {
    return: {
       checked: [],
       items: []
    };
  },
  created() {
      axios.get('my-data').then(resp => this.items = resp.data.items);
  }
}

answered Jan 17, 2019 at 14:29

Dazzle

3,1254 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Vue js v-model different checkboxes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related