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

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

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

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

Q&A

解決済

3回答

2866閲覧

Vue.jsで欲しい値が出力されない。

Nero1129

総合スコア130

Vue.js

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

0グッド

0クリップ

投稿2020/02/19 10:15

問題

作成したAPIをたたくと下記のようなデータがJSON形式で返ってきます。

JSON

1"data": { 2 "circle":{ 3 "id": "", 4 "circlename": "", 5 } 6}

後述するHTMLで返ってきた値を出力しようとすると、全然出力されず、下記のようなエラーコードが吐かれます。

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'circle' of undefined" (found in <Root>)

エラーの吐かれているコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 9 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 10 <title>Document</title> 11</head> 12 13<body> 14 <main> 15 <div id="app"> 16 <h1>{{ this.result.data.circle.circlename }}</h1> 17 <h2>{{ this.result.data.circle }}</h2> 18 </div> 19 </main> 20 <script> 21 var user = new Vue({ 22 el: "#app", 23 data() { 24 return { 25 result: [] 26 } 27 }, 28 created() { 29 axios.post('URL/', { 30 circle_id: "", 31 user_id: "" 32 }) 33 .then(function (response) { 34 this.result = response; 35 JSON.stringify(this.result); 36 37 // console.log(this.result); 38 // console.log(typeof this.result); => object 39 // console.log(this.result.data); 40 // console.log(typeof this.result.data); => object 41 // console.log(this.result.data.circle); 42 // console.log(typeof this.result.data.circle); => object 43 // console.log(this.result.data.circle.circlename); 44 // console.log(typeof this.result.data.circle.circlename); => string 45 46 }) 47 .catch(function (error) { 48 console.log(error); 49 }); 50 }, 51 mounted() {}, 52 }) 53 </script> 54</body> 55 56</html>

コメントアウトしたconsole.logはすべて問題なく出力されました。

試したこと

エラーが先にコンソールに吐かれてから、console.logの結果が出力されるので検討もつかず、何もしていません。
一応、beforeCreateくらいは試しましたが、変わりませんでした。

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

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

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

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

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

miyabi_takatsuk

2020/02/19 12:41 編集

どの回答に対しても、既に試した、と言われてますが、 質問文に書いて頂かないと、第三者にはまったく分かりません。 回答の無駄打ちがこれ以上起きないうちに、 試したことは全部質問文に記載してください。 質問文は修正できますので。
guest

回答3

0

コンポーネントのdatathisなしで取得できないでしょうか?

vue

1<h1>{{ result.data.circle.circlename }}</h1> 2<h2>{{ result.data.circle }}</h2>

コンポーネントの基本 — Vue.js


[追記]
created()で非同期処理でデータを取得しているので、取得が終わる前にテンプレートでresultの値を参照しているのがエラーの原因かと思います。
以下のようにデータがセットされているかチェックしてから書くとどうでしょうか?

(もしくは、moutendにコードを移すとどうでしょうか?)

vue

1<h1>{{ result.data && result.data.circle.circlename }}</h1> 2<h2>{{ result.data && result.data.circle.id }}</h2>

投稿2020/02/19 11:05

編集2020/02/19 12:04
shgtkshruch

総合スコア665

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

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

Nero1129

2020/02/19 11:50

既に試していますが、変わりません。
shgtkshruch

2020/02/19 12:05

なるほど、別の原因がありそうなので追記しました。
guest

0

ベストアンサー

複数の間違いの合併症で問題が発生しております。一つ一つ解決してください。

1 テンプレート構文上での this の使用

他の方が回答している通り、<template> ~ </template> 内では this は不要です。
というより、これがあると適切に動作しないはずです。

2 axios.post のレスポンスの解釈違い

axios.post(~).then() メソッドが受け取るコールバック関数の引数 response は、以下のようなプロパティを持ちます。

  • data : レスポンスボディの内容
  • status : レスポンスステータス
  • ... その他いろいろ

したがって、

javascript

1result.data.circle.circlename

ではなく

javascript

1result.data.data.circle.circlename

としなければなりません。

3 result に存在しないプロパティ

他の方が回答している通り、created の処理が終わる前に result.data. ... が参照される可能性があり、この段階でエラーになります。

javascript

1data() { 2 return { 3 result: { data: { data: circle: { circlename: '' } } } 4 } 5}

などとして初期値を与えるか、そもそもの設計をどうにかするかしてください。

投稿2020/02/19 12:32

編集2020/02/19 12:39
R.Mizukami

総合スコア1077

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

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

0

二重括弧で囲むときやv-bindで変数をバインドするときなどhtmlに値を埋め込むときthisは必要ありません。

Vue

1{{ this.result.data.circle.circlename }} 2{{ this.result.data.circle }}

となっている部分を

Vue

1{{ result.data.circle.circlename }} 2{{ result.data.circle }}

に変えてみてはどうでしょう?

投稿2020/02/19 11:08

編集2020/02/19 11:12
miso24

総合スコア75

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

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

Nero1129

2020/02/19 11:50

既に試してみますが、変わりません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問