VueJS多个级别对象$SET

Question

我试图将一个对象的值设置在另一个输入中，但它不起作用。

data中的对象开始为空

data(){
form: {}
}

然后，在beforeMount，我在第一层用n个值填充对象，然后在其中填充其他n个值(我不知道有多少值，也不知道它们的名称)

this.form: {
s1: {
name: 'test'
},
s2: {
test: '123'
}
}

最后，当我使用事件或在v模型中设置值时，什么也不会发生。输入保持初始值。

我认为this.$set可能是解决方案，但它只有在对象只有一个级别时才有效

this.$set(this.form['s1'], 'name', 'New Value');

基本例子:

<template>
<q-input filled v-model="form['s1']['name']" label="Filled" />
<script>

export default {
name: 'APP',

components: {

},

data () {
return {
form: {},
}
},
beforeMount() {
this.form['s1'] = {};
this.form['s1']['name'] = "Test";
}
}
</script>

这是使用类星体运行的基本最小示例，但在使用native-base的文本输入和elementjs的vue-native(React-Native)中也会发生。

Answer 1

您可以按照文档中描述的方式使用Object.assign。必须是反应性的

export default {
name: 'APP',
components: {},
data () {
return {
form: {},
}
},
beforeMount() {
this.form = Object.assign({}, this.form, {
s1: {
name: 'test'
},
s2: {
test: '123'
}
});
// this.form['s1'] = {};
// this.form['s1']['name'] = "Test";
}
}
</script>