Vue.js Vuejs如何在数组包含值时显示Div

我试图显示基于数组内容的图像

我正在为自助餐厅创建一个菜单式页面。我需要显示每个项目过敏原，但不知道如何使用v-if显示包含相应过敏原图像的div（如果它包含在过敏原数组中）。我正在从一个我无法控制的api中提取所有数据。这是api返回内容的示例

{
"location_id": "Cannon",
"serve_date": "20200204",
"meal_name": "BREAKFAST",
"category": "Euro Kitchen",
"name": "Chorizo & Egg Chilaquiles",
"serving_size": "1 each (229.50g)",
"nutrients": [
{
"name": "Calories",
"measurement": "kcal",
"amount": 477.2
},
{
"name": "Total Fat",
"measurement": "g",
"amount": 30.73
},
{
"name": "Saturated Fat",
"measurement": "g",
"amount": 12.55
},
{
"name": "Trans Fat",
"measurement": "g",
"amount": 0
},
{
"name": "Cholesterol",
"measurement": "mg",
"amount": 433.25
},
{
"name": "Sodium",
"measurement": "mg",
"amount": 900.56
},
{
"name": "Carbohydrates",
"measurement": "g",
"amount": 23.57
},
{
"name": "Total Fiber",
"measurement": "g",
"amount": 2.2
},
{
"name": "Total Sugars",
"measurement": "g",
"amount": 2.25
},
{
"name": "Protein",
"measurement": "g",
"amount": 25.22
},
{
"name": "Vitamin A",
"measurement": "iu",
"amount": 1310.47
},
{
"name": "Vitamin C",
"measurement": "mg",
"amount": 1.68
},
{
"name": "Calcium",
"measurement": "mg",
"amount": 271.25
},
{
"name": "Iron",
"measurement": "mg",
"amount": 2.85
},
{
"name": "Water",
"measurement": "g",
"amount": 3.76
},
{
"name": "Ash",
"measurement": "g",
"amount": 0.05
},
{
"name": "Potassium",
"measurement": "mg",
"amount": 160.63
},
{
"name": null,
"measurement": null,
"amount": 42.87
}
],
"allergens": [
"Milk",
"Egg",
"Corn",
"MSG"
],
"ingredients": "Scrambled Eggs (Liquid Eggs (Whole Eggs; Citric Acid; Water); Cheddar Cheese (Pasteurized Milk; Salt; Enzymes; Annatto); Salt; Black Pepper); Tortilla Chips (Corn Cooked with Lime Water; Water; Cellulose Gum; Guar Gum; Sodium Propionate; Propionic Acid; Sodium Hydroxide; Fumaric Acid; Sorbic; Methyparanen; Propylparaben); Chorizo Sausage (Pork; Vinegar; Water; Chili Peppers; Salt; Paprika; Spices; Oleoresin Paprika; Garlic Powder; Onion Powder; Sugar; Autolyzed Yeast; Oleoresin Capsicum; Natural Flavors; Natural Smoke Flavor); Enchilada Sauce (Tomato Puree; Water; Red Chili Puree; Salt; Chili Pepper; Canola Oil; Onion Powder; Spices; Garlic Puree; Oleoresin Paprika; Pectin; Cornstarch; Natural Flavor; Lemon Juice Concentrate; Citric Acid; Guar Gum; Xanthan Gum; Garlic Powder; Autolyzed Yeast Extract; Locust Bean Gum); Green Onions; Cotija Cheese (Pasteurized Whole Milk; Salt; Rennet; Enzymes; Cellulose)",
"header": false,
"special_diets": [
"Vegetarian"
]
},

在这个片段的底部有一个名为“过敏原”的字段。在网站上，我有相应的图像，这些项目匹配每一个。比如说

img src=“./images/Wheat_icon.png”

当且仅当阵列包含该过敏原时，我想显示此图标

我试着这样做：

<div class="nutrition-allergen-icon" v-if="'displayedContains(egg)'">
                <img class="nutrition-allergen-img" 
                src="./images/Egg_icon.png"></div>

methods: {
displayedContains: function (item) {
    console.log("hit")
    for(allergen in this.displayedItem) { 
      if(allergen == item)
      return true;
    }
    return false;
  },
}

---

我需要它是一个功能，因为如果过敏原数组中有许多不同的坚果，可以显示坚果的过敏原图标

如果使用对象存储过敏原字符串与其对应图像之间的关系会怎么样？大概是这样的：

查询：{
Egg:'Egg_image.png'，
Milk:'Milk_image.png'，
玉米：'Corn_image.png'，
花生：“nut_image.png”，
胡桃：“nut_image.png”，
杏仁：“nut_image.png”，
MSG:'MSG_image.png'
...
},

这样，您就可以循环浏览过敏原并显示正确的图像，如下所示：

还有一个很假的例子，这里是文本而不是图像：

---

我想我有一个解决方案，但它与您在那里尝试的有点不同

您可以使用您的方法检索过敏原的图像，而不是检查其是否存在

因此，您的模型中会有类似的内容：

data（）{
返回{
...
}
},
方法：{
获取过敏原图像（过敏原）{
开关（过敏原）{
“鸡蛋”一案：
返回'Egg_icon.jpg'；
“牛奶”案例：
返回'Milk_icon.jpg'；
}
}
}

或者，如果您可以控制图像图标的名称，您可以直接命名它们，这样就不需要switch语句：

方法：{
获取过敏原图像（过敏原）{
返回“${allergen}\u icon.jpg”；
}
}

然后，当您进入应用程序中需要显示过敏原图像的部分时，只需迭代过敏原数组，并使用新方法查找相应的图像：

下面是一个工作示例的代码笔：

---

我认为您的代码片段不清楚，但是您可以应用此逻辑进行条件呈现：

newvue({
el:“#应用程序”，
数据（）{
返回{
成分：[
{name:'foo'}，
{name:'egg'}，
{name:'bar'}
],
过敏原：[
“牛奶”，
“鸡蛋”，
“玉米”，
“味精”
],
过敏原案例：[]
}
},
创建（）{
this.allogenslowercase=this.allogens.map（allogen=>allogen.toLowerCase（））；
},
方法：{
displayedContains（项目）{
const itemLowerCase=item.toLowerCase（）
返回this.slowercase.includes（itemLowerCase）//返回true | false
}
}
})

{{component.name}

来自何处

egg

在

v-if=“'displayedContains（egg）”

？感谢您及时的回复，工作得非常出色！我最终选择了这个解决方案，因为我需要对默认情况进行更多的控制。非常感谢。

computed: {
    displayedContains: function (item) {
        console.log("hit")
        for(allergen in this.displayedItem) { 
          if(allergen == item)
          return true;
        }
        return false;
      },
    }