Q&A
どの回答に対しても、既に試した、と言われてますが、
質問文に書いて頂かないと、第三者にはまったく分かりません。
回答の無駄打ちがこれ以上起きないうちに、
試したことは全部質問文に記載してください。
質問文は修正できますので。
問題
作成した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くらいは試しましたが、変わりませんでした。
回答3件
0
コンポーネントのdataはthisなしで取得できないでしょうか？
vue
1<h1>{{ result.data.circle.circlename }}</h1> 2<h2>{{ result.data.circle }}</h2>
[追記]
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
総合スコア665
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
総合スコア1086
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
総合スコア75
あなたの回答
tips
プレビュー
