[Vuejs]-Vuejs how to display Div if an array contains a value

by

0👍

✅

I think I have a solution but it’s a little different than what you’re attempting there.

You can use your method to retrieve the image of the allergen instead of checking whether its there or not.

So you’d have something like this in your model:

data() {
    return {
       ...
    }
},
methods: {
    getAllergenImage(allergen) {
        switch (allergen) {
            case 'Egg':
                return 'Egg_icon.jpg';
            case 'Milk':
                return 'Milk_icon.jpg';
        }
    }
}

or if you have control over the name of the image icons, you can just name them so that the switch statement isn’t needed:

methods: {
    getAllergenImage(allergen) {
       return `${allergen}_icon.jpg`;
    }
}

Then when you get to the part of your app where you need to display the images for the allergens, just iterate over the allergen array and look-up the corresponding image using your new method:

<div class="nutrition-allergen-icon" v-for="allergen in allergens">
    <img class="nutrition-allergen-img" :src="'./images/' + getAllergenImage(allergen)">
</div>

Here’s a codepen of a working example:

https://codepen.io/kburlz/pen/PoqYOrQ

👤kburlz

0👍

What if you used an object to store the relationship between allergen strings and their corresponding images? Something like this:

  allergenLookup: {
      Egg: 'egg_image.png',
      Milk: 'milk_image.png',
      Corn: 'corn_image.png',
      Peanut: 'nut_image.png',
      Walnut: 'nut_image.png',
      Almond: 'nut_image.png',
      MSG: 'msg_image.png'
      ...
  },

That way you can loop through the allergens and display the correct image like this:

<div class="nutrition-allergen-icon" v-for="allergen in foodItem.allergens">
  <img class="nutrition-allergen-img" :src="'./images/' + allergenLookup[allergen]">
</div>

Also, a very fake example, with text instead of images here:
https://jsfiddle.net/ebbishop/6x9bonh4/

👤ebbishop

-1👍

I think that your snippet isn’t clearly, however u can apply this logic to do conditional rendering:

new Vue({
  el: '#app',

  data() {
    return {
      ingredients: [
        { name: 'foo' },
        { name: 'egg' },
        { name: 'bar' }
      ],
      allergens: [
        "Milk",
        "Egg",
        "Corn",
        "MSG"
      ],
      allergensLowerCase: []
    }
  },

  created () {
    this.allergensLowerCase = this.allergens.map(allergen => allergen.toLowerCase());
  },

  methods: {
    displayedContains (item) {
      const itemLowerCase = item.toLowerCase()
      return this.allergensLowerCase.includes(itemLowerCase) // returns true | false
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <template 
    v-for="ingredient in ingredients"
  >
    <div
      v-if="displayedContains(ingredient.name)"
      class="nutrition-allergen-icon"
    >
      {{ ingredient.name }}
      <img 
        class="nutrition-allergen-img" 
        src="./images/Egg_icon.png"
      >
    </div>
  </template>
</div>

or using computed properties to filter:

new Vue({
  el: '#app',

  data() {
    return {
      ingredients: [
        { name: 'foo' },
        { name: 'egg' },
        { name: 'bar' },
      ],
      allergens: [
        "Milk",
        "Egg",
        "Corn",
        "MSG"
      ],
      allergensLowerCase: []
    }
  },

  created () {
    this.allergensLowerCase = this.allergens.map(allergen => allergen.toLowerCase());
  },

  computed: {
    filteredIngredients() {
      return this.ingredients.filter(ingredient => this.allergensLowerCase.includes(ingredient.name.toLowerCase()))
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div
    v-for="(ingredient, index) in filteredIngredients" :key="index"
    class="nutrition-allergen-icon"
  >
    {{ ingredient.name }}
    <img 
      class="nutrition-allergen-img" 
      src="./images/Egg_icon.png"
    >
  </div>
</div>

and for the src image:

src="`./images/${ingredient.name}_icon.png`"
👤Christian Carrillo

Leave a comment