javascript - Vue.js 无法读取未定义的属性 'split'

Question

我在我的 vue.js 应用程序中显示分页符。

<div class="Message__body__message">
    <p v-for="line in message.message.split('\n')" track-by="$index">{{ line }}<br></p>
</div>

但我收到错误:

main.js:7382 [Vue warn]: Error when evaluating expression "message.message.split('\n')": TypeError: Cannot read property 'split' of undefined

但是 message.message 不是空的!我什至收到了预期的结果，为什么会抛出这个错误？

Answer 1

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

因为在某个阶段，它是 未定义。显然，如果您最终获得了预期的结果，那么它就会被定义，但那是以后的事情。

您可以通过以下方式解决它:

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

...但最好查看该代码正在做什么的更大画面，并找出为什么 message.message 有时是 undefined 它正在尝试对此进行评估。

---

作为Bill Criswell指出in a comment ，您可能会考虑使用 computed property在您的模型上而不是模板内表达式。例如:

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

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

然后

v-for="line in messageLines"