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

Posted 2023-02-22

【中文标题】在 VueJS 中导入 JSON 对象并向其添加新项目

【英文标题】：Import JSON object in VueJS and add new items to it

【发布时间】：2016-03-03 12:43:16

【问题描述】：

在 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>

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

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

【参考方案1】：

你应该使用vue的$set方法，

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

http://jsfiddle.net/f7pdf9nx/

【讨论】：

感谢您的回答！对于其他人，您可能需要在 attr 周围放置括号“[]”。像这样.$set('attributes.["' + attr + '"]', data)，以防点语法抛出无效的setter表达式。