Bagaimana untuk menyembunyikan elemen senarai berdasarkan syarat dalam kaedah?

Question

Andaikan saya mempunyai tatasusunan item yang ingin saya gelungkan, dan setiap item mempunyai keadaannya sendiri berdasarkan bahagian lain aplikasi.

<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 Mempunyai fungsi yang mengambil beberapa data daripada tatasusunan lain -

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

Sekarang, jika tatasusunan lain tidak wujud (adalah palsu), data dalam tatasusunan itu tidak akan dipaparkan, tetapi ikon dan nama item 1 masih akan dipaparkan kerana ia tidak tergolong dalam pernyataan bersyarat dalam kaedah tersebut.

Jadi bagaimana saya boleh mengatasi kaedah ini supaya keseluruhan item dalam senarai disembunyikan apabila syaratnya palsu?

Perlu diingat bahawa item 2 和 item 3 mempunyai set syaratnya sendiri, jadi saya tidak boleh memohon v-if pada templat. Saya perlu menyasarkan item ini secara individu.

Answer 1

Tambah atribut condition pada setiap item tatasusunan -

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

Dan di dalam 模板, gunakan sifat ini untuk menyembunyikan/menunjukkan item -

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