Выводить массив обэктов через фильтер нажатия checkbox?

Question

Как реализовать вывод масива обэктов в котором есть именно те item обьекты которые я могу выбрать через checkbox

 <div v-for="item in items">
      <div>{{item.name}}</div>
      <div>{{item.format}}</div>
      <input type="checkbox" v-model="selected">
    </div>

data() {
return {
    items: [
    {name: 'name01', format: 'mb'},
    {name: 'name02', format: 'gb'},
    {name: 'name003', format: 'mb'},
]
}

}

Answer 1

Можно добавить в модель признак, по которому показывать/скрывать элемент. И использовать его в v-if

new Vue({
  el: '#app',
  data() {
    return {
      items: [{name: 'name01', format: 'mb'},
              {name: 'name02', format: 'gb'},
              {name: 'name003', format: 'mb'},
      ]
    }
  }
});
Vue.config.devtools = false;
Vue.config.productionTip = false;

.flex-row {
  display: flex;
  flex-direction: row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="flex-row">
    <div>
      Список с чекбоксом, с добавлением в модель:
      <div class="flex-row" v-for="item in items">
        <div>{{item.name}}</div>
        <div>{{item.format}}</div>
        <input type="checkbox" v-model="item.selected" />
      </div>
    </div>
    <div>
      Вывод списка в зависимости от значения чекбокса:
      <div v-if="item.selected" class="flex-row" v-for="item in items">
        <div>{{item.name}}</div>
        <div>{{item.format}}</div>
      </div>
    </div>
  </div>
  json будет выглядеть так:
  <pre>{{ items }}</pre>
</div>

БЛОГ НА HUSL

Выводить массив обэктов через фильтер нажатия checkbox?

Ответы (1 шт):