Javascript 在VueJS data（）和v-bind:sync表单中动态设置对象值

因此，我正在构建一个动态表单生成器，它基于在数据中创建的对象生成表单：{}，然后在beforeMount中设置问题键/值对，这些对使用v-bind.sync绑定到表单生成子组件

我希望能够在页面上的表单{}中看到对键/值对的更改，但由于键-值对是动态生成的，因此它们不是被动的

当我记录this.form时，我可以看到对对象值的更改，但我认为我缺少一个函数，无法让它们在页面上刷新：

父组件，其中设置了空表单对象：

<template lang="html">
  <div>
    <DynamicForm
      v-bind.sync="form"
      :questions="questions"
      :onSubmit="onSubmit"
    >
      <template slot="buttons">
        <b-button
          type="submit"
          block
        >
          Submit
        </b-button>
      </template>
    </DynamicForm>

    <div class="form-output">
      {{form}}
    </div>
  </div>
</template>

<script>
export default {
  // ...
  data(){
    return {
      form: {},
// questions normally loaded via http request, set here in data for example's sake
      questions: [
        {
          "type": "TEXT",
          "label": "Name",
          "model": "name"
        },
        {
          "type": "NUMBER",
          "label": "Age",
          "model": "age"
        }
      ]
    }
  },
  beforeMount(){
    let questionArray = this.questions

    for(var i = 0; i < questionArray.length; i++){
      this.form[questionArray[i].model] = questionArray[i].defaultValue ? questionArray[i].defaultValue : ''
    }
  },
  // ...
}

---

这个答案是由迈克尔·利维在评论中英勇地发表的

为了使动态生成的表单内容具有反应性，我们必须使用Vue.set设置表单键值对，在组件中别名为：$setobject，key，value

新的beforeMount将使用Vue.set而不是此。表单[questionArray[i]。模型]=questionArray[i]。值：

---

-使用Vue.set向表单对象添加新属性，或者按照您的方式创建全新对象，然后将其分配到表单属性中……这正是我所需要的，您是我的英雄@MichalLevý

<template lang="html">
    <template v-for="question in questions">
        <b-form-input
          :v-model="question.model"
          @input="formInput(question.model, $event)"
        >
        </b-form-input>
    </template>
  </b-form>
<script>
export default {
  // ...
  props: {
    questions: Array,
    onSubmit: Function
  },
  methods: {
    formInput(key, value) {
      console.log(`Key: ${key}, Value: ${value}`)
      this.$emit(`update:${key}`, value)
    },
  },
  // ...
}
</script>

  beforeMount(){
    let questionArray = this.questions

    for(var i = 0; i < questionArray.length; i++){
      var valueToSet = questionArray[i].defaultValue ? questionArray[i].defaultValue : ''

      this.$set(this.form, questionArray[i].model, valueToSet)
    }
  },