For loop 与硬编码为数据相比，作为道具的对象数组上的vuejs loopin渲染不正确

当我试图将一组对象作为道具传递给我的组件时

[{“prize”：“first”，“abbr”：“first prize”，“value”：“50”}，{“prize”：“second”，“abbr”：“second prize”，“value”：“30”}，{“prize”：“third”，“abbr”：“Trird prize”，“value”：“20”}]

…我没有得到我期望的3列，但我得到了100多列，并且在文本框中缺少占位符和数据属性

导出默认值{
道具：[“设置”、“颜色”、“绘图类型”]，
数据：函数（）{
返回{
奖品：{
第一:{
名称：“”，
电话：''
},
第二：{
名称：“”，
电话：''
},
第三：{
名称：“”，
电话：''
},
第四：{
名称：“”，
电话：''
}
}
}
},
...
...

如何修复代码，以便将给定的对象数组作为道具传递，并仍能正确渲染

当我硬编码设置时，表格会正确呈现：

{{setting.abbr}

{{setting.prize}
£；{{setting.value}}
奖品
数
名称
电话
£；{{setting.value}}
{{setting.prize}
{{奖品[setting.prize].name}
{{奖品[设置.奖品].电话}
保存结果
导出默认值{
道具：['color'，'draw_type']，
数据：函数（）{
返回{
设置：[
{
“奖品”：“第一”，
“缩写”：“一等奖”，
“值”：“50”
},
{
“奖品”：“二等奖”，
“缩写”：“二等奖”，
“值”：“30”
},
{
“奖品”：“第三名”，
“缩写”：“三等奖”，
“值”：“20”
}
],
奖品：{
第一:{
名称：“”，
电话：''
},
第二：{
名称：“”，
电话：''
},
第三：{
名称：“”，
电话：''
},
第四：{
名称：“”，
电话：''
}
}
}
},
安装的（）{
console.log（this.settings）；
}
};

在元素v上添加键，因为可能是您的问题

<tr v-for="(setting, index) in settings" :key="index">
   <td>&pound;{{ setting.value }}</td>
   <td>{{ setting.prize }}</td>
   <td>{{ prizes[setting.prize].name }}</td>
   <td>{{ prizes[setting.prize].telephone }}</td>
</tr>

£；{{setting.value}}
{{setting.prize}
{{奖品[setting.prize].name}
{{奖品[设置.奖品].电话}

默认情况下，道具是字符串类型，因此当您传入一个对象数组时，它将被解释为一个字符串。

v-for

将字符串作为一个字符数组进行迭代，这可能会解释没有预期属性的100多个项目

应按如下方式设置：

导出默认值{
道具：{
设置：{
类型：数组，
默认值：（）=>[]
},
颜色：细绳，
绘图类型：字符串
},
}

Vue.component（“奖品”{
模板：`
奖品
数
名称
电话
£；{{setting.value}}
{{setting.prize}
{{奖品[setting.prize].name}
{{奖品[设置.奖品].电话}
`,
道具：{
设置：{
类型：数组，
默认值：（）=>[]
},
颜色：细绳，
绘图类型：字符串
},
数据（）{
返回{
奖品：{
第一:{
名字：“杰克”，
电话：‘（555）111-1111’，
},
第二：{
名字：“吉尔”，
电话：‘（555）222-2222’，
},
第三：{
姓名：“詹姆斯”，
电话：‘（555）333-3333’，
},
第四：{
姓名：'简'，
电话：‘（555）444-4444’，
}
}
}
}
})
新Vue({
el:“#应用程序”，
数据：（）=>({
设置：[
{
奖品：'第一'，
缩写：“一等奖”，
价值：50
},
{
奖项：二等奖，
缩写：“二等奖”，
价值：30
},
{
奖项：第三名，
缩写：“三等奖”，
价值：20
}
]
}),
})

---

请在传递组件上的道具时提供代码笔或完整代码的链接