首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >[Vue.js]希望“呈现错误:"TypeError:无法读取未定义的属性'title‘”

[Vue.js]希望“呈现错误:"TypeError:无法读取未定义的属性'title‘”
EN

Stack Overflow用户
提问于 2021-08-02 01:05:48
回答 1查看 48关注 0票数 0

我正在用我正在创建的应用程序创建一个详细的屏幕。

在转换到详细信息屏幕时,屏幕上不会出现数据的内容,此错误发生在控制台中:

代码语言:javascript
运行
复制
Error in render: "TypeError: Cannot read property 'title' of undefined".

代码

代码语言:javascript
运行
复制
<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路由”↓

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
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

代码语言:javascript
运行
复制
json.set! :latest_information do
    json.id @latest_information.id
    json.title @latest_information.title
    json.detail @latest_information.detail
end

试过

·将byebug放入控制器,检查@latest_information的值

代码语言:javascript
运行
复制
(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数据

代码语言:javascript
运行
复制
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\":\"てst\",\"detail\":\"てst\"}}"

环境

rails 6

vue@2.6.10

后记

查看响应的内容并修改如下,我得到了值。但是,它没有显示在屏幕上。

Show.vue

代码语言:javascript
运行
复制
  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();
  },
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-02 03:49:35

我认为这是原因

代码语言:javascript
运行
复制
.then(response => {
            this.title = response.data.title
            this.detail = response.data.detail
          })

它应该是

代码语言:javascript
运行
复制
.then(response => {
            this.title = response.latest_information.title
            this.detail = response.latest_information.detail
          })

或者您可以尝试调试响应。

代码语言:javascript
运行
复制
.then(response => {
           console.log(response)
          })
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68615459

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档