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

【问题标题】：Adding new keys generated by a variable to a object in Vue将变量生成的新键添加到Vue中的对象
【发布时间】：2016-04-16 20:26:01
【问题描述】：

使用 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 会根据选择的各种用户选项而变化）。似乎我们必须编写一个方法来确定对象属性是否已设置，如果未设置，则设置它。有没有更好的方法来完成上述操作？

【问题讨论】：

如果没有设置，那么设置它你想设置什么？价值从何而来？
我们要设置为v-model路径
Vue.set( object, key, value ) 可能对您有帮助，因为您只能即时更新您想要的密钥vuejs.org/api/#Vue-set

标签： javascript laravel object vue.js

【解决方案1】：

您似乎可以通过使用created 钩子和$set 来解决这个问题：

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

但是，如果 item_id 和 my_answer_key 可以改变，这种方法最终将不起作用，因为 Vue 没有动态双向绑定。换句话说，您的 v-model 中的绑定将被创建一次，并且以后不会在 item_id 或 my_answer_key 值发生变化时更改。

因此，要完成这样的事情，您可能需要求助于使用 v-if 并切换它来销毁和重新创建输入（并且它是绑定的）。这可能行得通。

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

【讨论】：