将变量生成的新密钥添加到Vue中的对象

Question

使用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>

收到错误：

我们知道您可以使用vm。$ set（）方法向对象添加属性。但是，我们正在动态构建模型路径（item_id和my_answer_key根据所选的各种用户选项而变化）。看起来我们必须编写一个方法来确定对象属性是否已经设置，如果没有设置，则设置它。有没有更好的方法来实现上述目标？

Answer 1

使用created挂钩和$set，您似乎可以解决这个问题：

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

但是，如果item_id和my_answer_key可以更改，则此方法最终将无效，因为Vue没有动态双向绑定。换句话说，v模型中的绑定将创建一次，如果item_id或my_answer_key值中的任何一个发生更改，则不会在以后更改。

所以，要完成这样的事情，你可能需要求助于使用v-if之类的kludge并切换它来销毁并重新创建输入（以及它的绑定）。这可能有用。

有时，计算机可以帮助解决这些问题。将输入绑定到数据模型上的简单属性，并使用computed来生成您在其他地方需要的实际嵌套数据模型。