在 vue 中加载 json 数据

Question

我正在尝试将我的 data/data.json 文件加载到我的组件中，以便在单击特定部分时显示数据。

我的数据片段

"colors": [
      {"id": 1, "type": "direct", "primary": "red", "hex": [1, 4]},
      {"id": 2, "type": "direct", "primary": "yellow", "hex": [2, 5]},
      {"id": 3, "type": "direct", "primary": "blue", "hex": [3, 6]},
      {"id": 4, "type": "split", "primary": "red", "hex": [1, 7, 8]},
      {"id": 5, "type": "split", "primary": "yellow", "hex": [2, 9, 10]},
      {"id": 6, "type": "split", "primary": "blue", "hex": [3, 11, 12]},
      {"id": 7, "type": "analogous", "primary": "red", "hex": [1, 13, 14]},
      {"id": 8, "type": "analogous", "primary": "yellow", "hex": [2, 15, 16]},
      {"id": 9, "type": "analogous", "primary": "blue", "hex": [3, 17, 18]}
    ]

我有另一个数据集连接到十六进制数据，这就是为什么它们只是编号

对于数据中的加载，我有如下：

var app = new Vue({
el:"#app",
data:function() {
    return{
        json: null
    }
},
methods: {

}
});

$.getJSON('data/data.json', function (json) {
    app.json = json;
});

有什么好的方法可以将它添加到我的组件中，以便我可以正确显示我想要显示的数据？

Answer 1

您可以在安装后将其加载到组件本身中，使用 mounted 挂钩：

// ...
data () {
  return { json: null }
},
mounted () {
  $.getJSON('data/data.json', json => {
    this.json = json
  })
}