Wie verstecke ich Listenelemente basierend auf der Bedingung in der Methode?

Question

Angenommen, ich habe eine Reihe von Elementen, die ich durchlaufen möchte, und jedes Element hat seine eigene Bedingung, die auf anderen Teilen der Anwendung basiert.

<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 Haben Sie eine Funktion, die einige Daten aus einem anderen Array übernimmt -

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

Wenn das andere Array nun nicht existiert (falsch ist), werden die Daten in diesem Array nicht angezeigt, aber das Symbol und der Name von item 1 werden weiterhin angezeigt, da sie nicht zur bedingten Anweisung in der Methode gehören.

Wie kann ich diese Methode also überschreiben, sodass das gesamte Element in der Liste ausgeblendet wird, wenn die Bedingung falsch ist?

Denken Sie daran, dass item 2 和 item 3 seine eigenen Bedingungen hat, sodass ich v-if nicht auf die Vorlage anwenden kann. Ich muss diese Elemente einzeln ansprechen.

Answer 1

为数组的每个项目添加一个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 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>