質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

1507閲覧

VueのライブラリにAPIからとってきたJSONを反映させたい

NiheiSeiji

総合スコア10

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/11/18 03:07

編集2020/11/18 03:11

前提・実現したいこと

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の知識不足ならば勉強を続けるしかないと思っております。
些細な可能性でもよいのでアドバイスいただけると助かります。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問