我的應用程式循環遍歷蔬菜作物列表，並為每個作物顯示疾病鍵和控制措施的連結。
對於其中一個作物（cropid=6），沒有疾病鍵存在，我無法停止顯示該特定連結。
我的程式碼相關部分如下：
<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>
我的資料部分如下：
diseases: [
{ link: "disease key", id: "k", path: "key" },
{ link: "disease controls", id: "d", path: "control" },
],
如果cropID=6，我該如何停止顯示"disease key"連結？
謝謝/Tom
對於條件顯示，您需要使用
v-if。假設disease.id類似於cropId，您可以使用下列程式碼：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>