计算属性中的状态操作在组件加载时产生控制台错误

Question

我正在将常规 JavaScript 函数（split 和 join）应用于计算的属性，它本身接收一个状态变量。

但是我在安装组件时遇到 Cannot read property 'split' of undefined" 错误，因为那时我计算的属性 user 暂时还是空的。

有什么解决办法吗？

<template>
  <div>
    {{ userDob }}
  </div>
</template>

<script>
import { mapState } from "vuex"

export default {
  computed: {
    ...mapState({
      user: state => state.dashboard.user || {}
    }),
    userDob() {
      return this.user.date_of_birth.split("-").reverse().join("-")
    }
  }
}
</script>

Answer 1

方法一

您可以在 Vuex 中为对象设置默认值，以便它始终可以使用：

user: {
  date_of_birth: "01-01-1970"
}

方法二

您可以在获取数据时只显示一个空字符串：

userDob() {
  try {
    return this.user.date_of_birth.split("-").reverse().join("-")
  }
  catch(error) {
    return ""
  }
}

Answer 2

您可以将 v-if 指令添加到 div 元素，其中包含计算出的属性。

<template>
  <div v-if="user">
    {{ userDob }}
  </div>
</template>

The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

参考：https://vuejs.org/v2/guide/conditional.html

真实值：https://developer.mozilla.org/en-US/docs/Glossary/Truthy

计算属性中的状态操作在组件加载时产生控制台错误

Operations on state in computed property yields console error on component load

vue.js

vuex

computed-properties

方法一

方法二

计算 属性 中的状态操作在组件加载时产生控制台错误

Operations on state in computed property yields console error on component load

vue.js

vuex

computed-properties

方法一

方法二

计算属性中的状态操作在组件加载时产生控制台错误