时间戳

首页 > 解决方案 > Vue 条件渲染对条件给出错误

vue.js - Vue 条件渲染对条件给出错误

问题描述

我正在尝试学习 Vue，但在条件渲染方面遇到了麻烦。它没有破坏应用程序，但它给了我一个控制台错误。

最初，字符是一个空对象。

我试图仅在存在字符时（按下按钮时）渲染卡片。目前我收到错误

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

目前，一张卡片在它应该渲染之前不会渲染，但它给了我这些错误。

我的组件是：

<template>
  <v-card v-if="character" min-width="350" outlined>
    <div class="d-flex flex-no-wrap justify-space-between">
      <v-avatar class="ma-3" size="125" tile>
        <v-img :src="character.image"></v-img>
      </v-avatar>

      <div>
        <v-card-title class="secondary--text text-h6">{{
          character.name
        }}</v-card-title>
        <v-card-subtitle class="secondary--text"
          >Featured in {{ character.episode.length }} episodes</v-card-subtitle
        >
        <v-card-subtitle class="secondary--text pb-0 pt-0">{{
          character.species
        }}</v-card-subtitle>
        <br />

        <v-card-subtitle class="secondary--text pt-0"
          >Origin: {{ character.origin.name }}</v-card-subtitle
        >
      </div>
    </div>
  </v-card>
  <div v-else></div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'CharacterCard',
  computed: mapGetters(['character'])
};
</script>

标签： vue.jsvuex

解决方案

你说

最初，字符是一个空对象。

然后你试图访问character.episode.length哪个给出错误"TypeError: Cannot read property 'length' of undefined"，因为character.episode它是未定义的，它没有属性“长度”

有几种潜在的解决方案。这里有几个：

您可以直接将其直接放入模板中，或者将其放入计算属性中可能会更好。

推荐阅读