Показать и скрыть некоторые элементы div внутри v-for l oop в зависимости от их значения?

Question

У меня есть список объектов, которые отображаются в v-for l oop. Все они имеют определенную пару ключ-значение, и на основании этого значения я бы хотел, чтобы пользователь мог переключать кнопки вне структуры l oop, чтобы отображать или скрывать эти элементы. По сути, я хочу, чтобы сначала отображались все элементы, а затем при переключении кнопки отображались только элементы с истинным значением, а затем все элементы, например, c.

Что-то как

 const items = [
    { 
      exampleKey: false
    },
    { 
      exampleKey: true
    },
    { 
      exampleKey: false
    }
 ]

 <button @click="updateList">click to update list</div>
 <div v-for="items in itemList">item example</div>

 methods: {
    updateList: function(){
        // make the magic happen
    }
 }

Конечно, это всего лишь псевдокод, но он иллюстрирует то, к чему я стремлюсь. Я ищу какой-либо метод или вычисляемое свойство, которое позволит пользователю переключать видимость элементов.

Answer 1

Я бы сделал свойство данных таким, чтобы оно переключалось как истина / ложь, когда кнопка нажата и вычисленное свойство возвращает элементы, основанные на этом свойстве.

Примерно так:

<button @click="showElements = !showElements">click me</button>
<div v-for="item in filteredItems">{{ item }}</div>

data() {
  return {
    items: [
      { 
        exampleKey: false
      },
      { 
        exampleKey: true
      },
      { 
        exampleKey: false
      }
    ],
    showElements: true
  };
},
computed: {
  filteredItems() {
    return showElements ? this.items : this.items.filter(item => item.exampleKey);
  }
}

Answer 2

Так что не следует объединять v-for и v-if в одном элементе. То, что вы можете сделать, это либо включить фильтр в ваш v-for:

<div v-for="item in items.filter(i => i.exampleKey)">{{item.foo}}</div>

, либо (мое предпочтение) вы можете выполнять итерации элементов в обычном режиме для создания контейнерных элементов div и добавлять дочерний контент только там, где требуется условие удовлетворен:

<div v-for="item in items">
  <div v-if="item.exampleKey">{{item.foo}}</div>
</div>

Если вы хотите добавить элемент управления, чтобы скрывать / показывать элементы с exampleKey ложью, вы можете изменить свой l oop на:

<div v-for="item in items">
  <div v-if="item.exampleKey || showItemsWithFalseExampleKey">{{item.foo}}</div>
</div>

И вы можете создать свойство данных "showItemsWithFalseExampleKey", которое будет переключаться кнопкой:

<button @click="showItemsWithFalseExampleKey = !showItemsWithFalseExampleKey">Toggle hidden items</button>

Конечно, стоимость рендеринга для v-if намного выше, чем при использовании v-show, поэтому выберите, какой лучше в зависимости от вашей ситуации: https://vuejs.org/v2/guide/conditional.html#v -if-vs-v-show