VueJS 多级对象 $SET答案

【问题标题】：VueJS Multiple level objects $SETVueJS 多级对象 $SET
【发布时间】：2021-01-24 05:25:11
【问题描述】：

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

数据中的对象开始为空

    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。

【问题讨论】：

标签： javascript vue.js vuejs2 quasar

【解决方案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>

【讨论】：