I'm showing page breaks within my vue.js application.

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

But I receive the error:

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

But message.message is not empty! I even receive the expected result, so why does it throw this error?

I'm showing page breaks within my vue.js application.

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

But I receive the error:

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

But message.message is not empty! I even receive the expected result, so why does it throw this error?

• javascript
• vue.js

3 Answers 3

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 being 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 ment, you might look at using a puted property on your model for that rather than an in-template expression. E.g.:

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

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

then

v-for="line in messageLines"

The view load when the page is first time load or message.message change.

I believe that you have use vue data in wrong way like this.

data: function(){
  return {
    message: {}
  }
}

Obviously, you have defined message attribute in data, but not define message.message. So first time when it load, message is still empty, it still didn't get your ajax response, so it tells that message.message is undefined. You should change it into this, use nested attribute, to set a legal value.

data: function(){
  return {
    message: {message: ''}
  }
}

You should understand that the view get render at least 2 times, first time use default value you set in data, other time when you change the message, in ajax callback or other situation.

message.message might not be available when vue tried to load it. Request vue to try to load message.message only when message.message is available. The following worked for me.

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