Issue when trying to select one checkbox inside v-for in Vuejs?

Question

<div id="example-1">
  <ul>
    <input type="text" v-model="searchString" placeholder="Filter" />
    <p>sortKey = {{sortKey}}</p>
    <li v-for="item in sortedItems">
      <input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="checked" /> {{ item.price }} - {{ item.name }}
    </li>
  </ul>
  <div class="cecont" v-if="!checked">
    <p>text content</p>
  </div>

</div>

With the above code in codepen, I am able to perfom task like, on clicking on checkbox the content should be hidden. Where i am able to achieve it. But problem is, on clicking of one checkbox, I am able to select multiple checkboxes.

So resolve this issue, Do i need to add id attribute to input??

or change my v-model attribute, and if i change my v-model to checked.name functionality not working.

How to solve this issue?

your v-model checked should be part of an array. Right now its single key for all checkboxes in the loop — Suraj Rao
– Suraj Rao, Commented Dec 2, 2021 at 11:03

Nitheesh · Accepted Answer · 2021-12-02 14:50:18Z

1

You should set checked property to individual item

You are creating multiple checkboxes with all having the same v-model value, which is checked. If any one of the checkboxes is checked, all the checkboxes will be checked together.

Solution.

You should set the checked property to each item in the loop. This will make the v-model work independently.

var example1 = new Vue({
  el: '#example-1',
  data: {
    // sort: item,
    sortKey: 'name',
    checked: false,
    searchString: "",
    items: [
      { price: '1', name: 'mm', checked: false },
      { price: '22', name: 'aa', checked: false },
      { price: '55', name: 'dd', checked: false },
      { price: '77', name: 'gg', checked: false },
      { price: '123', name: 'kk', checked: false },
      { price: '53', name: 'mn', checked: false },
    ]
  },
  computed: {
    checkedLength() {
      return checkedLength = this.items.filter(item => item.checked === true).length;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="example-1">
  <ul>
    <input type="text" v-model="searchString" placeholder="Filter" />
    <p>sortKey = {{sortKey}}</p>
    <li v-for="item in items">
      <input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" /> {{ item.price }} - {{ item.name }}
    </li>
  </ul>
  <p> checkedLength {{checkedLength}}</p>
  <div class="cecont" v-if="checkedLength > 0">
    <p>text content</p>
  </div>
</div>

edited Dec 2, 2021 at 14:50

answered Dec 2, 2021 at 11:04

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

3 Comments

Suraj Rao Over a year ago

@Sundar v-if="!checked" will also change. You need to figure out for which checkbox you need to show the div

Suraj Rao Over a year ago

@Sundar so call a function that checks your items array for checked in v-if

Nitheesh Over a year ago

@Sundar I have made a small change in that logic, I have made the condition to show the text as a computed property. This wil be the better approach.

Collectives™ on Stack Overflow

Issue when trying to select one checkbox inside v-for in Vuejs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related