Vue.js 在vue应用程序中映射和显示json返回的数据

我正在从api返回json

      dietPhase: (state) => state.dietPhase,

我在州里有这个，它返回三种食物——早餐、晚餐和晚餐。 我已将其过滤为仅返回早餐类型。现在我对映射这个有问题。 我希望它只从这个json返回Ingridients名称和单位。我如何做到这一点，并显示在我的html

computed - 

breakfast() {
      return _.filter(this.dietPhase.meals, ({ type }) => type == "breakfast");
    },

您可以使用来迭代过滤列表，然后再次获取每种餐点的配料名称和单位

要正确呈现结果列表，您可以使用两个

v-for

，一个外部用于餐点，一个内部用于配料：

newvue({
el:“应用程序”，
数据（）{
返回{
第二阶段：{
膳食：[
{
“id”：“34649fd9-88a5-4773-b890-3253f964ab7b”，
“说明”：“鸡肉和蔬菜”，
“类型”：“早餐”，
“成分”：[
{
“名称”：“鸡肉”，
“重量”：“65”，
“单位”：“65g”，
“类型”：“标记”，
“类型识别号”：“5b32d5b3-dd88-459e-80ca-9c9c4d0891c3”
},
{
“名称”：“蔬菜”，
“重量”：“95”，
“单位”：“95g”，
“类型”：“产品组”，
“类型id”：“b5fad2f4-25e6-45d2-9d2a-4202cbfaef40”
}
]
},
]
}
}
},
计算：{
早餐{
return.filter（this.dietPhase.feeds，（{type}）=>type==“早餐”）
.map（膳食=>{
常量配料=膳食.配料.映射（配料=>(
{name:component.name，单位：component.unit}
));
返回{……膳食、配料}
});
}
}
});

身份证件
描述
类型
成分
{{meat.id}
{{mean.description}}
{{MEIN.type}


{{component.name}{{{component.unit}


如何在我的vue中显示此信息？当我将{{breash}}放入html中时，它返回整个json，并且没有映射。我该如何在这里面定位映射的食物？@Dave你是说渲染它？它是如何“未映射”的？是的，如何在html中正确地呈现它。您希望如何准确地呈现它？比如显示餐点列表，在每个餐点中都有配料列表？我只想让它像这样一个列表，用v表示{{component.name}{{{component.unit}
  mounted() {
    this.setSlug(this.dietPhaseSlug);
    this.fetch();
  },
  methods: {
    ...mapActions({
      setSlug: "dietPhase/setSlug",
      fetch: "dietPhase/fetch",
    }),
     

[
   {
      "id":"34649fd9-88a5-4773-b890-3253f964ab7b",
      "description":"Chicken and veg",
      "type":"breakfast",
      "ingredients":[
         {
            "name":"Chicken",
            "weight":"65",
            "unit":"65g",
            "type":"tag",
            "type_id":"5b32d5b3-dd88-459e-80ca-9c9c4d0891c3"
         },
   {
            "name":"Vegetables",
            "weight":"95",
            "unit":"95g",
            "type":"product_group",
            "type_id":"b5fad2f4-25e6-45d2-9d2a-4202cbfaef40"
         }
      ]
   },