【Vue.js】「 Error in render: "TypeError: Cannot read property 'title' of undefined" 」を解決したい

Question

概要

作成中のアプリ内で、詳細画面を作成しております。
そこで、詳細画面に遷移したときに、画面にはデータの中身は発生せず、consoleには「 Error in render: "TypeError: Cannot read property 'title' of undefined" 」このエラーが発生。
解決策について、ご教示いただけると幸いです。

![

コード

Show.vue

<template>
  <main>
    <section>
      <div>
        <table>
          <thead>
          <tr>
            <th>タイトル</th>
            <th>詳細</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{{ latest_information.title }}</td>
            <td>{{ latest_information.detail }}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>
</template>

<script>
export default {
  
  data() {
    return {
      latest_information: {},
    }
  },
  methods: {
    setData() {
      this.$loading.load(this.$auth.api.get(`admin/latest_informations/${this.$route.params.id}.json`)
          .then(response => {
            this.latest_information = response.data.latest_information
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
  },
  mounted() {
    this.setData();
  },
}
</script>
```　　
　　
#### コマンド「rails routes」の結果

api_v1_admin_latest_information GET /api/v1/admin/latest_informations/:id(.:format) api/v1/admin/latest_informations#show {:format=>:json}

  
#### latest_informations_controller.rb

module Api::V1::Admin
class LatestInformationsController < Api::V1::ApiController
before_action :set_latest_information, only: [:show, :destroy]

def show
  render json: @latest_information
end

private

def set_latest_information
  @latest_information = LatestInformation.find(params[:id])
end

end
end

#### show.json.jbuilder

json.set! :latest_information do
json.id @latest_information.id
json.title @latest_information.title
json.detail @latest_information.detail
end

## 試したこと
#### ・controller内にbyebugを仕込んで、@latest_informationの値を確認

(byebug) @latest_information
#<LatestInformation id: 3, title: "���������", detail: "���������", created_at: "2021-08-01 22:01:39", updated_at: "2021-08-01 22:01:39">

#### ・jbuilderで作成されたJSONデータを確認

irb(main):040:0> Jbuilder.encode do |json|
irb(main):041:1* json.set! :latest_information do
irb(main):042:2* json.id LatestInformation.find(3).id
irb(main):043:2> json.title LatestInformation.find(3).title
irb(main):044:2> json.detail LatestInformation.find(3).detail
irb(main):045:2> end
irb(main):046:1> end
LatestInformation Load (1.3ms) SELECT latest_informations.* FROM latest_informations WHERE latest_informations.id = 3 LIMIT 1
LatestInformation Load (1.0ms) SELECT latest_informations.* FROM latest_informations WHERE latest_informations.id = 3 LIMIT 1
LatestInformation Load (0.7ms) SELECT latest_informations.* FROM latest_informations WHERE latest_informations.id = 3 LIMIT 1
=> "{"latest_information":{"id":3,"title":"てｓｔ","detail":"てｓｔ"}}"

## 環境
rails 6系
vue@2.6.10

Answer 1

this.$loading.load(this.$auth.api.get(admin/latest_informations/${this.$route.params.id}.json)
.then(response => {
this.latest_information = response.data.latest_information
の中で、
console.log(response)を行ったところ、response.data.titleやdetailで値を受け取っていたため、
this.latest_information = response.data.title
this.latest_information = response.data.detailに修正した

Answer 2

mountdライフサイクルフックで取得した値を変数latest_informationに返していない気がします。
mounted内でメソッドを使った場合は、その戻り値をmounted内で受け取り、data変数に返さないとDOMに反映されなかったはず。