如何在 VUE 中通过 v-model 直接更新嵌套对象数组值？

Posted 2023-02-16

【中文标题】如何在 VUE 中通过 v-model 直接更新嵌套对象数组值？

【英文标题】：How update nested object array value directly by v-model in VUE?

【发布时间】：2020-07-31 18:38:33

【问题描述】：

我需要通过 v-model 更新 JSON 中的值

 class: "data.child",
    "myform.input1": [true, "<input1 value>"]


<input type="text" v-model="<what to put here?>" > //so that directly value can be update in my vue data property JSON mentioned above

【参考方案1】：

不能直接使用 v-model 来完成，除非您想将输入类型更改为多选。 如果你真的想要准确的输出，可以像下面这样监听 onchange 事件。 或者可以只使用 v-model 并根据需要输入数据...但需要转换为数组。

const jsonData =  class: "data.child",
    "myform.input1": [true, "<input1 value>"],
    "myform.input2": [true, "<input1 value>"]



const App = 
template: `<div>
<input type="text" v-model="data['myform.input2']"/>
<input type="text" @change="update"/>
<p>JSON.stringify(data, null, 2)</p>
</div>`,
methods: 
update: function(event) 
this.data['myform.input1'] = [true, event.target.value];


,
data()
return data: jsonData



new Vue(
render: h => h(App),
).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
</div>