Paparan bersyarat dalam Vue.js

Question

Apl saya bergelung melalui senarai tanaman sayur-sayuran dan memaparkan kunci penyakit serta pautan untuk mengawal langkah bagi setiap tanaman.

Untuk salah satu tanaman (cropid=6), tiada kunci penyakit wujud dan saya tidak boleh berhenti menunjukkan pautan khusus itu.

Bahagian kod saya yang berkaitan adalah seperti berikut:

<v-container fluid grid-list-lg>
    <v-layout justify-center>
      <v-flex xs12>
        <h3>Diseases</h3>
        <v-card
          v-for="(disease,index) in diseases"
          :key="index"
          ripple
          class="hand"
          @click="navigateTo(disease.id)"
        >
          <v-container>
            <v-layout fill-height>
              <v-flex xs12 md8 lg6>
                <span v-html="$t(disease.link)"></span>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>

Bahagian data saya adalah seperti berikut:

diseases: [
    { link: "disease key", id: "k", path: "key" },
    { link: "disease controls", id: "d", path: "control" },
  ],

Bagaimanakah cara saya berhenti menunjukkan pautan "kunci penyakit" jika cropID=6?

Terima kasih/Tom

Answer 1

Untuk paparan bersyarat anda perlu gunakan v-if。假设 disease.id 类似于 cropId, anda boleh menggunakan kod berikut:

var app = new Vue({
  el: '#app',
  data: {
    diseases: [{
        link: "disease key",
        id: "k",
        path: "key"
      },
      {
        link: "disease controls",
        id: "d",
        path: "control"
      },
    ]
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
  <v-container fluid grid-list-lg>
    <v-layout justify-center>
      <v-flex xs12>
        <h3>Diseases</h3>
        <v-card v-for="(disease,index) in diseases" :key="index" ripple class="hand" @click="navigateTo(disease.id)">
          <v-container v-if="disease.id!='d'">
            <v-layout fill-height>
              <v-flex xs12 md8 lg6>
                <span v-html="disease.link"></span>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</div>