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

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

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

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

Q&A

解決済

1回答

1907閲覧

Vue.js 初期化処理でAPIからデータを取ってきた結果が画面に反映されない

darum

総合スコア70

Vue.js

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

0グッド

0クリップ

投稿2020/03/08 01:46

編集2020/03/08 11:39

画面を表示するにあたり、表示時(created())でAPIを呼び出し、データを取得した結果、値を表示する処理を作っていますが、
API呼び出し(今はテスト的にファイル)はうまくいっていますが、画面が再描画されない様子です。

環境:vue2.6.11

コード

javascript

1<template> 2<div> 3 <div class='chart' v-for="(task, i) in tasks"> 4 {{task}} <!-- テスト表示 --> 5 <div> 6</div> 7</template> 8 9<script> 10import axios from 'axios' 11 12export default { 13 data() { 14 return { 15 tasks: [], 16 } 17 }, 18 created() { 19 this.loadTasks() 20 }, 21 methods: { 22 async loadTasks() { 23 var resp = await axios.get('./task.json') 24 for(var i in resp.data) { 25 this.$set(this.tasks, i, resp.data[i]) 26 } 27 this.tasks.splice(resp.data.length) 28 console.log(this.tasks) // ここのは狙いのデータが表示される 29 }, 30 }, 31} 32</script>

何かアドバイスいただけますと幸いです。

====
追記
task.jsonは以下のような構造です

[ [ {"task": 11}, {"task": 12} ], [ {"task": 21} ], [ {"task": 31} ] ]

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

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

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

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

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

guest

回答1

0

ベストアンサー

配列が2段になっているので、以下のように2段ループすればいいと思います。なおAPI結果はそのままthis.tasksに保存した場合です。

<div v-for="(dailyTasks, i) in tasks" v-bind:key="i"> array={{ i }} <div class="chart" v-for="(task, j) in dailyTasks" v-bind:key="j"> task={{ task.task }} </div> </div>

動作確認したコード全体も貼っておきます

<template> <div> <div v-for="(dailyTasks, i) in tasks" v-bind:key="i"> array={{ i }} <div class="chart" v-for="(task, j) in dailyTasks" v-bind:key="j"> task={{ task.task }} </div> </div> </div> </template> <script> import axios from "axios"; export default { data() { return { tasks: [] }; }, created() { this.loadTasks(); }, methods: { async loadTasks() { var resp = await axios.get("./task.json"); this.tasks = resp.data; } } }; </script>

※ test.jsonが想定していた内容と違っていたので回答を修正しています

投稿2020/03/08 07:43

編集2020/03/08 12:50
popobot

総合スコア6586

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

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

darum

2020/03/08 11:17

ダメでした。 this.tasks はコンソールにArrayで表示されているのですが、そこが誤っている感じでしょうか?
popobot

2020/03/08 11:33

Arrayとでるってことはちゃんと反映されてないってことないですかね? あと以下も気になりました ・this.tasks.splice(resp.data.length) ・v-forにv-bind:keyが指定されてない 回答欄に動作確認したコード貼ってみましたので確認してみてください
popobot

2020/03/08 11:35

それでもダメなら task.json が自分が思っているものと違うのかもしれません...
darum

2020/03/08 11:40

ご回答ありがとうございます。 私もtask.jsonの相違があるのかと思い、想定しているjson構造を追記したのでご確認いただければと思います。 データはArrayで来ることを想定しているのですが、それが相応しくないということであれば、Objectが返るようにしたいと思います
popobot

2020/03/08 11:55

ArrayのArrayのObjectなんですね... これをどう表示したいのでしょうか taskの値が列挙できればよいのでしょうか 11 12 21 31
darum

2020/03/08 12:18

現実的には、 array: 0 task=11 task=12 array: 1 task=21 array:2 task=31 というイメージでループさせたいですが、とりあえずはtasks がちゃんとループされるように 表示は[{task=11}, {task=12}] という感じで出ればいいかなと思っています。 ※ TODOリストをイメージしていただき、日付ごとの、タスクリストが並ぶ感じです。
popobot

2020/03/08 12:49

回答を直してみましたので、ご確認ください。
darum

2020/03/18 07:12

私の環境では解決できていないのですが、いただいている回答で納得はできているのでベストアンサーとさせていただきます。ご回答ありがとうございました。またよろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問