前提・実現したいこと
Vue.jsのVueMindmapというライブラリを使用しています。
JSON形式のデータをもとに画面描画をしてくれるライブラリです。
https://github.com/anteriovieira/vue-mindmap
ライブラリが容易した<mindmap>というタグに対してVueで定義したdataをバインドすることで画面描画がされるのですが、
APIをたたいて帰ってくるJSONをdataに代入してリアクティブに描画しようとした際にdataへの代入は完了しているものの画面描画されない状態となっています。
なお、dataに直接書いた静的なJSONやJSONファイルをimportした際は正常に描画されています。
発生している問題・エラーメッセージ
エラーメッセージはありません。
該当のソースコード
Vue
1<template> 2 <div id="app"> 3 4 <mindmap 5 :nodes="nodes" 6 :editable="true" /> 7 8 </div> 9</template> 10 11<script> 12import Vue from 'vue' 13import VueMindmap from 'vue-mindmap' 14// You need a specific loader for CSS files like https://github.com/webpack/css-loader 15import 'vue-mindmap/dist/vue-mindmap.css' 16 17Vue.use(VueMindmap) 18 19export default { 20 name: 'MyMindmap', 21 components: { 22 VueMindmap 23 }, 24 data() { 25 return { 26 // ↓これだと動きます↓ 27 // 'nodes': [ { "text": "node1", "fx": 10, "fy": 10 }, { "text": "node2","fx": -100, "fy": 100 } ], 28 'nodes': [], 29 }; 30 }, 31 mounted(){ 32 axios.get('https://{APIのモックURL}') 33 .then(response => 34 this.nodes = response.data) 35 }, 36} 37</script> 38
JSON
1[ { "text": "nodeAPI1", "fx": 10, "fy": 10 }, { "text": "nodeAPI2","fx": -100, "fy": 100 } ]
試したこと
・静的データでの画面描画(べた書きのJSONとJSONファイルのimport)→〇
・mounted、created内でaxiosを使ってみる→×
・他のライブラリでこのaxios~データ代入までの流れが正常に動くか→〇
→vue-json-tree-viewというライブラリを使用して試したところAPIでとってきたJSONが正常に画面に反映されました。
https://github.com/michaelfitzhavey/vue-json-tree-view
・devツールでnodesデータの中身を確認
→nodesのデータは取得したJSONのデータが代入されていましたが、mindmapには反映されていない模様です。
###懸念事項
APIでとってきたときだけ、リアクティブにならず、ライブラリの機能も読み込まれていない気がしています。
下記、chromeのVue拡張機能でみたデータです。
【APIのとき】 editable:true nodes:Array[2] 0:Object fx:10 fy:10 text:"nodeAPI1" 1:Object fx:-100 fy:100 text:"nodeAPI2"
【べた書きJSONのとき】 connections:Array[0] editable:true nodes:Array[2] 0:Object fx:10 fy:10 height:65 html:"<a id="node-undefined" >node1 </a>" index:0 nodesHTML:"" nodesHeight:0 nodesWidth:0 text:"node1" vx:0 vy:0 width:92 x:10 y:10 1:Object
↑明らかにライブラリが機能して情報が付加されているように見えます
ライブラリ依存の問題であればこのライブラリをあきらめるしかないと思いますし、
私のVueの知識不足ならば勉強を続けるしかないと思っております。
些細な可能性でもよいのでアドバイスいただけると助かります。。
あなたの回答
tips
プレビュー