Vueの初歩的な質問になります。

Question

いつも大変お世話になっております。
久しぶりにVue CLIを用いて簡単なシミュレーションアプリを作成しているのですが、
APIで取得したデータをhtml上に展開するところでハマってしまっています。

例えば、

const plan = {
  "id": 805,
  "date": "2021-02-20T23:49:22",
  "date_gmt": "2021-02-20T14:49:22",
  "title": {
    "rendered": "タイトルタイトルタイトルタイトル"
  }
}  

というデータがあった際に、{{ plan.title.rendered }} でタイトルが出力されると思うのですが、
なぜか 下記２つのエラーが出てしまいます。

Uncaught TypeError: Cannot read property 'rendered' of undefined

[Vue warn]: Unhandled error during execution of render function 
  at <Plan> 
  at <Simulation>

ちなみに、{{ plan.title }} では、ちゃんと"rendered": "タイトルタイトルタイトルタイトル"と出力されます。

深い階層になった途端にエラーが発生してしまうのでなんでだろう？とはてな状態です。

どなたか詳しい方がいらっしゃれば、ご教授いただけますと幸いです。

それではどうぞ宜しくお願い致します。

###環境
% vue --version
@vue/cli 5.0.0-beta.2

ソースコード

// store/index.js

import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
	
	state : {
		plan : ""
	},
	
	getters : {
		plan : (state) => state.plan,
	},
	
	mutations : {
		setPlan : (state, { plan }) => {
			state.plan = plan
		}
	},
	
	actions : {
		
		async fetchPlan({ commit }, { id }){
			
			const url = `https://localhost:8890/wp-json/wp/v2/posts/${id}/`;
			
			const planRowData = await axios.get(url)
			const plan = planRowData.data
			
			if( !plan.id ) throw new Error('Invalid Post.')
			
			commit('setPlan', { plan })
			
		}
		
	}
	
})

// App.vue

<template>
  <div id="simulation" class="simulation">

    <section>

      <Plan/>

    </section>

  </div>
</template>

<script>
import Plan from './components/Plan'

export default {

  name : 'Simulation',

  components : {
    Plan
  }

}
</script>

// Plan.vue
<template>
  <div>
   
    {{ plan.title.rendered }}
    // Uncaught TypeError: Cannot read property 'rendered' of undefined 発生！

  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {

  name : 'Plan',

  created(){
    this.fetchPlan({ id : 805 });
  },

  computed : {
    ...mapGetters([ 'plan' ])
  },

  methods : {
    ...mapActions([ 'fetchPlan' ])
  }

}
</script>

Answer 1

始めplunには何も入っていません。

そのため{{ plun.title }}はundefinedになり、何も表示されません。
その後にgetされたデータが入ってきて、plunの値が更新されるので結果的に{{ plun.title }}は中の値が表示されます。

しかし{{ plan.title.rendered }}に関しては、そもそもplun.titleがundefinedだった場合、undefinedに対してプロパティrenderedを指定しているのでエラーになります。

それを回避したい場合はgetが終わってから表示させるか、{{ plan.title && plan.title.rendered }}のようにすればよいかと思います。

※Optional Chainingを使うとplan.title?.renderedのようにより簡潔に書けますが、Vueのテンプレート内では使用できません。

Comments

[matsuo_basho]

ご回答の方ありがとうございます！
ご提案いただいたように{{ plan.title && plan.title.rendered }}とすることで、
無事に表示することができました。
ありがとうございます。

１つ質問があるのですが、ご提案いただいた以下の方法を選択した場合、
どのようにgetが完了するのを待てば良いのでしょうか？
これまで今の書き方でget完了時にリアクティブにデータが同期されるので、
getを待って処理を書かずとも、待っていれば自動で更新されるものだと思っておりました。。

「それを回避したい場合はgetが終わってから表示させるか」

[taku-hu]

例えば`isLoading`のようなものを定義して、fetchPlanの最初と最後で切り替えて管理します。
それをtemplate側で、

```
<template v-if="isLoading">
　<p>Loading...</p>
</template>
<template v-else>
　<Plan />
</template>
```

のようにして出しわける事が出来ます。

それと試験段階ではありますがVue3にはSuspenseという機能があり、これも非同期処理を待ってコンテンツの表示を行うことができます。
https://v3.ja.vuejs.org/guide/migration/suspense.html

[matsuo_basho]

なるほど、よく分かりました！
自分でもすでに使っている技術でした。。
こちらについても試してみたいと思います！ありがとうございます！！

Suspenseという機能についてもありがとうございます！
大変勉強になります！ただし以下のように記述がありましたので、本番利用は避けたいと思います(笑)

>本番のアプリケーションでは使用しないでください。

Answer 2

データ取得前の段階ではplanにtitle.renderedが存在しないためエラーになっている気がします。
（plan.titleの場合エラーにならないのは、こちらはデータ取得前の段階でもundefinedになるだけだからです）

またVue2ではオブジェクトのプロパティ追加を検出できないため、あらかじめdataに定義しておくかthis.$set()等のメソッドを使用して追加する必要があります。

planの初期値を以下に変えてみたらどうなるでしょうか？

plan: {
  title: {
    rendered: ''
  }
}

Answer 3

{{ plan.title["rendered"] }}

とすると表示されますでしょうか？

Comments

[matsuo_basho]

早速のご回答ありがとうございます！

{{ plan.title["rendered"] }} を試してみましたが改善せずです、、！

以下のエラーも出ていたようです。(と言いつつよく意味がわからないのですが、、。)

[Vue warn]: Unhandled error during execution of render function
at <Plan>
at <Simulation>

[退会済みユーザー]

そうなんですね・・・

実行時エラーですよね、文法エラーではなくて・・・
Planの中で、render関数を実行するときにエラーがでちゃってるみたいですが・・・

[matsuo_basho]

うーむ、よくわからないですね(笑)
store側で plan.title.renderd は取得できたので、stateにplanTitleを作成して対応してます。

const planTitle = plan.title.renderd

こんな感じですね。

[退会済みユーザー]

ちなみに、renderという関数を使っている場所はありますか？

[matsuo_basho]

いえ、質問文に掲載しているソースコードが全てですので、
render()を利用しているところはありません。