Supposons que je souhaite parcourir un tableau d'éléments et que chaque élément ait sa propre condition basée sur d'autres parties de l'application.

<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 Avoir une fonction qui prend des données d'un autre tableau -

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

Maintenant, si l'autre tableau n'existe pas (est faux), les données de ce tableau ne seront pas affichées, mais l'icône et le nom de item 1 seront toujours affichés car ils n'appartiennent pas à l'instruction conditionnelle de la méthode.

Alors, comment puis-je remplacer cette méthode afin que l’intégralité de l’élément de la liste soit masquée lorsque la condition est fausse ?

Gardez à l'esprit que item 2 和 item 3 a son propre ensemble de conditions, je ne peux donc pas appliquer v-if au modèle. Je dois cibler ces éléments individuellement.