VueJS 多级对象 $SET

Question

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

对象在 data

中开始为空

    data(){
        form: {}
    }

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

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

最后，当我使用事件或在 v-model 中设置值时，没有任何反应。输入保持初始值。

我认为 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>

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

Answer 1

您可以按照documentation中描述的方式使用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>

VueJS 多级对象 $SET

VueJS Multiple level objects $SET

javascript

vue.js

vuejs2

quasar