<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>Con el código anterior en codepen, puedo realizar tareas como, al hacer clic en la casilla de verificación, el contenido debe estar oculto. Donde soy capaz de lograrlo. Pero el problema es que, al hacer clic en una casilla de verificación, puedo seleccionar varias casillas de verificación.
Así que resuelva este problema, ¿necesito agregar el atributo id a la entrada?
o cambie mi atributo de modelo v, y si cambio mi modelo v a la funcionalidad marcada. nombre no funciona.
¿Cómo resolver este problema?
Debe establecer la propiedad checked en un elemento individual
Está creando varias checkboxes de verificación y todas tienen el mismo valor v-model , que está checked . Si alguna de las checkboxes de verificación está marcada, todas las checkboxes de verificación se marcarán juntas.
Solución.
Debe establecer la propiedad checked para cada elemento en el ciclo. Esto hará que el v-model funcione de forma independiente.
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>