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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

667閲覧

vue.js + axiosでjsonデータを受け取りhtmlに反映したい

helicoir

総合スコア10

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/05 06:36

編集2022/01/12 10:55

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/

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/02/05 07:18

>ブラウザのデベロッパーツールで見るとコメントアウトされているため、itemList[0].content.$tには要素がないと解釈しています とありますが、コメントアウトとは`(...)`のことですか?これはクリックすると内容が表示されます。Chrome側のパフォーマンスのために省略表示されている。 違かったらすみません。
helicoir

2019/02/05 07:43 編集

> コメントアウトとは`(...)`のことですか? いえ、デベロッパーツールでHTML要素(Elements)を見た時、contentBoxのコンポーネントがある部分が<!---->になっています 参照した要素が空だと呼び出したコンポーネント部分が丸ごとこうなるらしいんですが…
退会済みユーザー

退会済みユーザー

2019/02/05 08:42

なるほど、失礼しました。 これって単一ファイルコンポーネント(*.vue)を使ってますか?その場合、`new Vue`を使わないかもしれない。 https://jp.vuejs.org/v2/guide/single-file-components.html 普通にscriptとtemplateがファイル別々なら、new Vueの中で el: '#contentBox' しないとダメかも。 created通ってるってことは違うのかな・・・
guest

回答1

0

entry>gs$cell>$t にコンテンツが入っているのだから
{{ itemList[0].gs$cell.$t }}
だと思います。

投稿2019/02/05 06:44

yhg

総合スコア2161

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

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

helicoir

2019/02/05 07:40 編集

あ、ごめんなさいこれ色々試行錯誤してた時の名残で、本当はここも ```{{ itemList[0].gs$cell.$t }}``` です! 修正しておきます! ちなむと```〜〜.content.$t```にも gs$cell と同じくセル内のコンテンツが入っているのですが、これも表示されません……
yhg

2019/02/05 10:27

<script>部分が export default されてないのと、data が関数になっていないのが問題かなーと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問