根据它们的值显示和隐藏 v-for 循环内的某些 div？

Question

我有一个在 v-for 循环中显示的对象列表。 它们都有一个特定的键值对，并且基于该值，我希望用户能够在循环结构之外切换按钮以显示或隐藏这些元素。 基本上我希望首先显示所有项目，然后一旦切换按钮，只显示具有真实值的项目，然后返回所有项目等。

就像是

 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

所以你 不应该在同一个元素上组合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>

如果您想添加一个控件来隐藏/显示带有 false exampleKey的项目，您可以将循环更改为：

<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 ://v2.vuejs.org/v2/guide/conditional.html#v-if -vs-v-show

Answer 2

当单击按钮并让计算属性返回基于该属性的项目时，我会将数据属性切换为真/假。

像这样的东西：

<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);
  }
}