Vue.js 对computed属性中状态的操作在组件加载时产生控制台错误

我将常规JavaScript函数（

split

和

join

）应用于一个计算属性，该属性本身接收一个状态变量

但是，当组件装载时，我收到一个

无法读取未定义“

的属性“split”的错误，因为当时我的计算属性

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>

{{userDob}}
从“vuex”导入{mapState}
导出默认值{
计算：{
…地图状态({
用户：state=>state.dashboard.user | |{}
}),
userDob（）{
返回此.user.date出生日期.拆分（“-”）.reverse（）.join（“-”）
}
}
}

方法1 您可以在Vuex中设置对象的默认值，使其始终可以使用：

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

方法2 您可以在获取数据时显示空字符串：

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

方法1 您可以在Vuex中设置对象的默认值，使其始终可以使用：

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

方法2 您可以在获取数据时显示空字符串：

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

---

您可以向包含计算属性的

div

元素添加

v-if

指令

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

{{userDob}}

指令v-if用于有条件地呈现块。仅当指令的表达式返回truthy值时，才会呈现块

参考：

---

Truthy value:

您可以向包含计算属性的

div

元素添加

v-if

指令

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

{{userDob}}

指令v-if用于有条件地呈现块。仅当指令的表达式返回truthy值时，才会呈现块

参考：

---

Truthy value:

谢谢，从技术上讲它确实有效，但我想找一些比它更短或更优雅的that@drake035是的，不幸的是我们没有更好的方法来处理它，至少我找不到更好的方法。谢谢，技术上它确实有效，但我想找到比它更短或更优雅的that@drake035是 啊不幸的是，我们没有更好的办法来处理它，至少我找不到更好的办法。