更改动态嵌套 json 值答案

【问题标题】：Change dynamic nested json values更改动态嵌套 json 值
【发布时间】：2021-02-11 07:13:15
【问题描述】：

这是我的 Json：

{
    "name": "table",
    raw_material: {
        "iron": 2,
        "wood": 1,
        "glue": 1
    }
}

有时会有所不同：

{
    "name": "table",
    raw_material: {
        "iron": 2,
        "plastic": 1,
        "glue": 1,
        "water":4
    }
}

我需要详细说明一个表单，它允许我更新任何 raw_material 值，无论 key value 的数量是多少。这就是我所拥有的：

<li v-for="(value, key, index) in this.item.raw_material" :key="index">
    {{ key }} : {{ value }} : {{ index }}
    <b-form-input v-model="value"></b-form-input>
</li>

循环没问题。不幸的是，当我在输入字段中输入内容时，值没有改变（两种方式绑定）。

有什么想法吗？

【问题讨论】：

标签： json vue.js two-way-binding

【解决方案1】：

您应该使用key 绑定一个值以便能够对其进行编辑。

<li v-for="(value, key, index) in item.raw_material" :key="index">
    {{ key }} : {{ value }} : {{ index }}
    <b-form-input v-model="item.raw_material[key]"></b-form-input>
</li>

附：不要在组件模板中使用this，这可能会导致意外错误

【讨论】：