【Vue.js】想「渲染时出错："TypeError: Cannot read property 'title' of undefined" 」

Question

我正在使用我正在创建的应用程序创建详细信息屏幕。

转换到详细信息屏幕时，屏幕上没有出现数据的内容，并且在控制台中出现此错误：

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

代码

<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

尝试过

・在控制器中放入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\":\"てｓｔ\"}}"

环境

导轨 6
vue@2.6.10

后记

查看response的内容，修改如下，我得到了值。 但是，它不会显示在屏幕上。

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();
  },
}

Answer 1

我认为是这个原因

.then(response => {
            this.title = response.data.title
            this.detail = response.data.detail
          })

应该

.then(response => {
            this.title = response.latest_information.title
            this.detail = response.latest_information.detail
          })

或者您可以尝试调试响应

.then(response => {
           console.log(response)
          })