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

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 对象并向其添加新项目

Import JSON object in VueJS and add new items to it

php

json

vue.js