我正在尝试将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;
});
将它添加到我的组件的好方法是什么,以便我可以正确显示我想要显示的数据?
答案 0 :(得分:0)
使用mounted
挂钩,您可以在组件安装后将其加载到组件内:
// ...
data () {
return { json: null }
},
mounted () {
$.getJSON('data/data.json', json => {
this.json = json
})
}