代码之家 › 专栏 › 技术社区 › Qwertie

[Vue warn]:呈现时出错:“TypeError:\u vm.activity.activity未定义”

vuex vue.js javascript

Qwertie · 技术社区 · 6 年前

我有一个VueJS组件,它给了我一个错误 [Vue warn]: Error in render: "TypeError: _vm.activity.activity is undefined"

<template>
  <div class="activity box">
    <h1>{{activity.activity.title}}</h1>
    <div>

    </div>

    <h2>{{activity}}</h2>
  </div>

</template>

<script>
let activity = {}

export default {
  data () {
    return {
      activity
    }
  },
  methods: {},
  created: function () {
    this.$store.dispatch('show_activity', {params: {id: this.$route.params.id}}).then(activity => {
      this.activity = activity.data

    }, response => {

    })
  }
}
</script>

线路 <h1>{{activity.activity.title}}</h1> 正在导致错误。如果我把它改成 <h1>{{activity}}</h1> 这一页内容很好。奇怪的是,第一个实际上加载页面的标题很好,但是引发的JS错误导致页面上的其他JS无法正常运行。 activity 是从 vuex_rest_api

我搞不懂为什么这条线在显示良好时会产生错误。

2 回复 | 直到 6 年前

Vamsi Krishna 6 年前

自从 activity 对象是通过获取某些不包含属性的数据异步设置的 活动 当模板试图访问它时。

最好在获取数据后进行渲染。所以用一个 v-if 指令为:

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>

如果您显示某种加载以指示用户正在加载数据,则效果会更好。

<h1 v-if="activity.activity">{{activity.activity.title}}</h1>
<p v-else> loading.....</p>

IVO GELOV 6 年前

您应该在 data 并更改模板以检查 activity 实际上是一个对象并定义了给定的键

<template>
  <div class="activity box">
    <h1>{{activity && activity.activity ? activity.activity.title : 'Loading ...'}}</h1>
    <div></div>
    <h2>{{activity}}</h2>
  </div>

</template>

<script>
let activity = {}

export default 
{
  data () 
  {
    return 
    {
      activity:{}
    }
  },
  methods: {},
  created: function () 
  {
    this.$store.dispatch('show_activity', 
      {
        params: 
        {
          id: this.$route.params.id
        }
      }).then(activity => 
      {
        this.activity = activity.data
      });
  }
}
</script>

推荐文章

matthew · 如何检索存储状态的新旧值

6 年前

dendog · 如何在Vuex状态创建中使用函数

6 年前

Thuan Nguyen · 使用vuex更新数据

6 年前

MaratSR · 在vuex中创建操作的正确方法

6 年前

dendog · 动态填充Vuex状态

6 年前

Andriy Stolyar · 如何在Vuex存储区已经创建之后手动将其添加到Vuex存储区?

6 年前

Cameron · 数据显示在websocket响应中,但未显示在已解决的promise中

6 年前

cmasri · vue test utils:如何在mounted()生命周期挂钩中测试逻辑(使用vuex)?

6 年前

EmacsVI · Vue good表格在填充后不会显示“emptystate”

6 年前

pirmax · VueJS-VueX和flash消息

6 年前