Javascript 在我最后的评论中，我不是故意粗鲁的。无论如何，错误回溯显示它发生在Card.vue组件中。它有一个简单的解决方案，您可以使用Card&&Card.front，这样就不会抛出错误，但在查找原型时，我找不到信息回调的真正原因不会是对空数组的调用。所以你不需要检

---

在我最后的评论中，我不是故意粗鲁的。无论如何，错误回溯显示它发生在

Card.vue

组件中。它有一个简单的解决方案，您可以使用

Card&&Card.front

，这样就不会抛出错误，但在查找原型时，我找不到信息回调的真正原因不会是对空数组的调用。所以你不需要检查卡是否存在。当执行

typeof card.\u id

时，返回一个字符串。当执行

typeof card.\u id

时，返回一个字符串。

export default {
  components: {
    'app-header': header,
  },
  data() {
    return {
    }
  },
  created() {
    this.$store.dispatch('getAllCards');
  }
}

getters: {
  cardById: (state) => (id) => {
    return state.allCards.find((card) => card._id === id);
  }
}

<template>
  <div>
    <br>
    <div v-if="flipped" class="container">
      <div class="box">
        <pre v-if="card.code"><code class="preserve-ws">{{card.back}}</code></pre>
        <p class="preserve-ws center-vertical" v-else>{{card.back}}</p>
      </div>
    </div>
    <div v-else class="container">
      <div class="box">
        <h1 class="title has-text-centered center-vertical is-2">{{card.front}}</h1>
      </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
      card: {},
      flipped: false,
      general_card: false,
      code_card: true,
      random_card: false
    }
  },
  computed: {
  },
  methods: {
  },
  created() {
    this.card = this.$store.getters.cardById(this.$route.params.id);
  }
}
</script>

computed: {  
  card() {
    return this.$store.getters.cardById(this.$route.params.id);
  }
}

getters: {
  cardById: (state) => (id) => {
    return state.allCards.find((card) => card._id === id);
  }
}

getters: {
  cardById: (state) => (id) => {
    return state.allCards.find((card) => card && card._id === id);
  }
}

computed:{
    card(){
        return this.$store.state.allCards.find((card) => card._id === this.$route.params.id);
    }
}

<div v-if="!card"> Loading card... </div>
<div v-else> Rest of card template </div>

card() {
  return this.$store.getters.cardById(this.$route.params.id);
}

getters: {
  cardById: (state) => (id) => {
    var card = state.allCards.find((card) => card._id === id);
    if(card) {
      return card;
    }
    // on undefined return a default value
    return {
      front:'default value'
    };
  }
}