Javascript 将变量生成的新键添加到Vue中的对象

使用Vue.js（和Laravel）构建项目时，以下（大大简化）代码会导致以下错误：

Vue组件：

<template>
    <input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>

<script>
    export default {

        props: [

        ],

        data() {
            return {
                main_object: {},
                item_id: '1234',
                my_answer_key: '5678'
            }
        },

        ready: function () {
            vm = this;
        },

        methods: {

        }
    }

</script>

导出默认值{
道具：[
],
数据（）{
返回{
主对象：{}，
项目id:'1234'，
我的答案是：“5678”
}
},
就绪：函数（）{
vm=这个；
},
方法：{
}
}

收到错误：

<template>
    <input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>

<script>
    export default {

        props: [

        ],

        data() {
            return {
                main_object: {},
                item_id: '1234',
                my_answer_key: '5678'
            }
        },

        ready: function () {
            vm = this;
        },

        methods: {

        }
    }

</script>

---

我们知道可以使用vm.$set（）方法向对象添加属性。但是，我们正在动态地构建模型路径（根据所选的各种用户选项，项目id和我的答案键会发生变化）。似乎我们必须编写一个方法来确定对象属性是否已设置，如果未设置，则设置它。有没有更好的方法来完成上述任务？

您似乎可以通过使用

创建的
钩子和
$set
来解决这个问题：

created: function () {
    this.$set(this.item_id + "." + this.my_answer_key, "")
}

但是，如果item_id和my_answer_密钥可以更改，这种方法最终将无法工作，因为Vue没有动态双向绑定。换言之，v模型中的绑定将创建一次，并且如果
项目id
或
我的回答键
值发生更改，则不会在以后更改

因此，要完成类似的任务，您可能需要使用一个乱七八糟的方法，比如使用
v-if
，然后切换它来销毁和重新创建输入（以及它的绑定）。那可能行得通

有时，计算机可以帮助解决这些情况。将输入绑定到数据模型上的一个简单属性，并使用computed来生成其他位置所需的实际嵌套数据模型。
如果未设置，则要设置它，您希望将其设置为什么？该值来自何处？我们希望将其设置为v-model路径
Vue。设置（对象、键、值）
可能会对您有所帮助，因为您可以动态更新所需的键