Vue.jsとaxiosを使って色々試行錯誤していたところ行き詰まったので、質問させていただきます。
やりたいこと・概要
- vue.jsでGoogle spreadsheetからjson形式でデータを受け取りたい
- 受け取ったデータをvueインスタンス内のdataに格納したい
- 格納したデータをhtmlに反映したい
以下が問題にしたいコードになります。
<template> <div id="contentBox"> <p>{{ itemList[0].gs$cell.$t }}</p> </div> </template> <script> import Vue from 'vue' import axios from 'axios' const baseURL = 'spreadsheetのURL' new Vue({ data:{ itemList: [] }, created: function() { var _this = this; axios.get(baseURL) .then(function (res) { console.log(res.data.feed.entry); _this.itemList = res.data.feed.entry console.log(_this.itemList); }) .catch(function (error) { alert(error); }); }, }) </script>
_this.itemListにデータは格納されているはずなのですが、{{ itemList.[0].gs$cell.$t }}で表示することができません。
ブラウザのデベロッパーツールで見るとコメントアウトされているため、itemList[0].gs$cell.$tには要素がないと解釈しています(参考:https://qiita.com/kokoe/items/a5f4b950c36bfcd61ad9 )。
詳細
上記はconsole.log(_this.itemList);
の結果です。
スプレッドシートの情報をjsonデータに変換し、
data>feed>entry[n]
まで掘っていくと、上の画像のようなオブジェクト構造になります(nはセル指定番号)。
entry>gs$cell>$t
にコンテンツが入っており、templateで<p>{{ itemList[0].content.$t }}</p>
で「取扱いチーム」を指定し反映する、というつもりで書いていたのですが、うまくいきませんでした。
どのようにすれば反映できるでしょうか?教えていただければありがたいです。
追:こちらのページの内容を参考にしています
https://qiita.com/FrozenVoice/items/cbfa6d3f611a87b57cf4
http://irts.jp/2017/02/26/2625/