vinceの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]} 
    ] 

私のデータの

スニペットを私は、彼らは単にデータでロードするための

番号が付けられている理由ですHEXデータに接続された別のデータセットを持って、私はそれを持っています：

表示したいデータを適切に表示できるように、コンポーネントに追加するとよいでしょうか？

Answer 1

それが取り付けられていたら、あなたはmountedフックを使用して、コンポーネント自体の中でそれを読み込むことができます：

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