更改动态嵌套的json值

问题描述

这是我的杰森：

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

有时是不同的：

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

我需要详细说明一个表格，无论键值多少，该表格都可以更新任何raw_material值。 这就是我所拥有的：

<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>

循环正常。 不幸的是，当我在输入字段中键入内容时，该值未更改（2种方式绑定）。

有什么主意吗？

解决方法

您应该使用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>

P.S。不要在组件模板中使用this，否则可能会导致意外错误