I am creating a detail screen with the app I am creating.

When transitioning to the detail screen, the contents of the data do not occur on the screen, and this error occurs in the console:

Error in render: "TypeError: Cannot read property 'title' of undefined".

code

<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>

command「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

Tried

・Put byebug in the controller,check the value of @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">

・Check the JSON data created by jbuilder

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\":\"てｓｔ\"}}"

Environment

rails 6
[email protected]

postscript

Look at the contents of response and modify as follows.I got the value. However, it is not displayed on the screen.

Show.vue

  data() {
    return {
      latest_information: {
        title: "",
        detail: ""
      },
    }
  },
  methods: {
    // api_v1_admin_latest_information GET /api/v1/admin/latest_informations/:id(.:format) api/v1/admin/latest_informations#show {:format=>:json}
    setData() {
      this.$loading.load(this.$auth.api.get(`admin/latest_informations/${this.$route.params.id}.json`)
          .then(response => {
            this.title = response.data.title
            this.detail = response.data.detail
          })
          .catch(err => {
            this.$errorHandlers.initial(err);
          }));
    },
  },
  mounted() {
    this.setData();
  },
}