Bedingtes Rendern in Vue.js

Question

Meine App durchläuft eine Liste von Gemüsepflanzen und zeigt Krankheitsschlüssel und Links zu Bekämpfungsmaßnahmen für jede Kultur an.

Für eine der Kulturen (Ernte = 6) existiert kein Krankheitsschlüssel und ich kann nicht aufhören, diesen spezifischen Link anzuzeigen.

Der relevante Teil meines Codes lautet wie folgt:

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

Mein Datenteil lautet wie folgt:

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

Wie kann ich verhindern, dass der Link „Krankheitsschlüssel“ angezeigt wird, wenn CropID=6?

Danke/Tom

Answer 1

对于条件显示，您需要使用 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>