Rendu conditionnel dans Vue.js

Question

Mon application parcourt une liste de cultures maraîchères et affiche les clés des maladies et des liens vers les mesures de contrôle pour chaque culture.

Pour l'une des cultures (cropid=6), aucune clé de maladie n'existe et je ne peux m'empêcher de montrer ce lien spécifique.

La partie pertinente de mon code est la suivante :

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

Ma partie données est la suivante :

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

Comment puis-je arrêter d'afficher le lien « clé de maladie » si cropID=6 ?

Merci/Tom

Answer 1

Pour l'affichage conditionnel que vous devez utiliser v-if。假设 disease.id 类似于 cropId, vous pouvez utiliser le code suivant :

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>