Comment masquer les éléments de la liste en fonction de la condition dans la méthode ?

Question

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.

Answer 1

Ajoutez un attribut condition à chaque élément du tableau -

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
  }
]

Et à l'intérieur 模板, utilisez cette propriété pour masquer/afficher des éléments -

<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>