TypeError: Cannot read property 'split' of undefined

最新推荐文章于 2022-03-24 10:22:21 发布

原创最新推荐文章于 2022-03-24 10:22:21 发布 · 4.8w 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

各种错误、异常及解决方法专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在使用Vue.js时遇到的v-for循环处理未定义或空字符串值的问题，并提供了解决方案。建议通过计算属性来优化代码结构。

最近跟着慕课网学一个电商项目，学习前端页面出现了如下错误提示：

后面后台管理页面也出现了类似问题：

解决的办法即增加未定义(空字符串)的情况：

以下引用自：https://stackoverflow.com/questions/40340668/vue-js-cannot-read-property-split-of-undefined

ccepted

I even receive the expected result, so why does it throw this error?

Because at some stage, it is undefined. Clearly, if you're ultimately getting the result you expect, it's then becoming defined, but that's later.

You could work around it by doing:

v-for="line in (message.message || "").split('\n')"

...but it would probably be better to look at the greater picture of what that code's doing and find out why message.message is undefined at times it's trying to evaluate that.

As Bill Criswell points out in a comment, you might look at using a computed property on your model for that rather than an in-template expression. E.g.:

var vm = new Vue({
    // ...your other stuff here...

    // Computed properties:
    computed: {
        messageLines: function() {
            return (this.message.message || "").split("\n");
        }
    }
});

then