Question

我有一个使用VueX的Vue Js应用程序。在我的一个组件中，我正在调用一种截断某些文本的方法。此截断方法存在于用于小型助手功能的单独文件中。而我要截断的那段文本是从数据库中获取的状态中提取的。

假设这是我状态下的用户对象：

userState: {
   name: "John Doe",
   bio: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum laborum amet, dolores molestiae voluptates ea animi fugit quo repudiandae facilis.",
   age: 35
}

在我的模板中，我这样称呼个人简历：

<p>{{ truncate(userState.bio, 20, "...") }}</p>

在我的组件方法中，我有以下方法：

const helpers = require("@/utilities/helpers");
methods: {
  truncate(text, length, ending) {
     return helpers.truncateText(text, length, ending);
  }

}

我的助手文件中的方法是：

export const truncateText = (str, length, ending) => {
   if (length == null) {
      length = 100;
   }
   if (ending == null) {
      ending = '...';
   }
   if (str.length > length) {
      return str.substring(0, length - ending.length) + ending;
   } else {
      return str;
   }
}

我收到的消息是：

TypeError: Cannot read property 'length' of undefined

但是奇怪的是，截断的文本会在dom中呈现，即使控制台出现错误也是如此。

有什么想法吗？

提前谢谢！

编辑：

我应该提到不使用truncate方法调用user,bio完全不会出错，并且bio可以正常显示。

Answer 1

userState.bio的初始状态很可能是未定义，并且错误来自于未更新数据时的初始呈现。请尝试根据情况添加另一个字符串检查以消除错误：

if (str && str.length > length) {
}

Vue js方法返回未定义

1 个答案: