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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>