Question

在VueJS中，我从服务器导入一些JSON。在此之后，我用v-for指令显示数据。

事情是，稍后，我想向该JSON对象添加额外的数据。

这是PHP的数据对象生成器的一个示例：

{
"Height": {
    "description": "Height of product in centimeters.",
    "values": {
        "1": {
            "value": "20cm",
            "extra": ""
        },
        "2": {
            "value": "60cm",
            "extra": ""
        }
    }
}
}

这是我的VueJS实例：

new Vue({
  el: '#attributes_list',
  data: {
    attributes: {!! $attributes_json !!}
  },

  methods: {
    addAttribute : function(attr) {
      this.attributes[attr].values.new = {value: 'test', extra: 'test2'};
    }

  }
})

带有事件的按钮：

<button @click.prevent="addAttribute('Height')">Add</button>

我已经知道它不起作用，因为值不在数组中，因此我无法将新数据推入其中。但是如何向这个对象添加新数据呢？

在服务器端，我无法更改数据的格式。谢谢！

Answer 1

您应该使用vue的$set方法

this.$set('attributes.' + attr + '.values.new', {value: 'test', extra: 'test2'})

http://jsfiddle.net/f7pdf9nx/

在VueJS中导入JSON对象并向其添加新项

1 个答案: