vue.js 如何根据方法中的条件隐藏列表元素?

xdyibdwo  于 2023-01-02  发布在  Vue.js
关注(0)|答案(1)|浏览(140)

假设我有一个要遍历的项数组,其中每个项都有自己的条件,这些条件基于应用程序的其他部分。

<template v-for="(item, index) in items">
  <li>
    <i :class="item.iconClass"></i>
    {{ item.name }}
    <strong :class="item.textClass"> {{ item.function }} </strong>
  </li>
</template>
items: [{
    iconClass: "fas fa-calendar",
    name: 'item1',
    textClass: "text_style",
    function: this.function1
  },
  {
    iconClass: "fas fa-user",
    name: 'item3',
    textClass: "text_style",
    function: this.function2
  }, {
    iconClass: "fas fa-clock",
    name: 'item3',
    textClass: "text_style",
    function: this.function2
  }
]

item1有一个函数,该函数包含来自另一个数组的一些数据-

function1() {
  if (this.otherArray.otherItem) {
    return this.otherArray.otherItem
  }
}

现在,如果另一个数组中的数据不存在(为false),则不会显示该数组中的数据,但是item 1的图标和名称仍然会显示,因为它们不是方法中条件语句的一部分。
那么,如何重写这个方法,以便在条件为false时从列表中隐藏整个项呢?

    • 请记住,**item 2item 3有自己的条件集,所以我不能对模板应用v-if,我需要分别定位这些项。
jk9hmnmh

jk9hmnmh1#

condition属性添加到数组的每一项-

items: [{
    iconClass: "fas fa-calendar",
    name: 'item1',
    textClass: "text_style",
    function: this.function1,
    condition: this.otherArray && this.otherArray.otherItem
  },
  {
    iconClass: "fas fa-user",
    name: 'item3',
    textClass: "text_style",
    function: this.function2,
    condition: true // you can write your logic here
  }, {
    iconClass: "fas fa-clock",
    name: 'item3',
    textClass: "text_style",
    function: this.function2,
    condition: true // you can write your logic here
  }
]

template中,使用此属性隐藏/显示项目-

<template v-for="(item, index) in items">
  <li v-if="item.condition">
    <i :class="item.iconClass"></i>
    {{ item.name }}
    <strong :class="item.textClass"> {{ item.function }} </strong>
  </li>
</template>

相关问题