Conditional rendering in Vue.js

Question

My application loops through a list of vegetable crops and displays disease keys and links to control measures for each crop.

For one of the crops (cropid=6), no disease key exists and I cannot stop showing that specific link.

The relevant parts of my code are as follows:

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

My data part is as follows:

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

How do I stop displaying the "disease key" link if cropID=6?

Thank you/Tom

Answer 1

For conditional display, you need to use v-if. Assuming disease.id is similar to cropId, you can use the following code:

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>