Блог

Главная - Вопросы по программированию - Проблема при попытке установить один флажок внутри v-for в Vuejs?

Проблема при попытке установить один флажок внутри v-for в Vuejs?

#javascript #vue.js

#javascript #vue.js

Вопрос:

 <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>

С помощью приведенного выше кода в codepen я могу выполнить задачу, например, при нажатии на флажок содержимое должно быть скрыто. Где я могу этого добиться. Но проблема в том, что при нажатии на один флажок я могу выбрать несколько флажков.

Итак, решите эту проблему, нужно ли добавлять атрибут id для ввода??

или измените мой атрибут v-model, и если я изменю свою v-model на checked.функциональность имени не работает.

Как решить эту проблему?

Комментарии:

1. ваша v-модель checked должна быть частью массива. Прямо сейчас его единственный ключ для всех флажков в цикле

Ответ №1:

Вы должны установить checked свойство для отдельного элемента

Вы создаете несколько checkboxes , все из которых имеют одинаковое v-model значение, то есть checked . Если какой-либо из checkboxes них отмечен, все checkboxes они будут проверены вместе.

Решение.

Вы должны установить checked свойство для каждого элемента в цикле. Это сделает v-model работу независимой.

 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>

Комментарии:

1. @Sundar v-if="!checked" также изменится. Вам нужно выяснить, для какого флажка вам нужно показать div

2. @Sundar итак, вызовите функцию, которая проверяет ваш items массив на наличие проверенного v-if

3. @Sundar Я внес небольшое изменение в эту логику, я поставил условие показывать текст как вычисляемое свойство. Это будет лучший подход.

Метки: