Compiling inline text strings in Vue

Question

I'm building a simple app in Vue. It's simple enough that I'm not using components.

I store my text strings in a config object so they're easy to change:

var config = {
    orderInvalid: "Order {{ order.id }} is invalid"
}

In the Vue object I push that data into a generic error variable:

if(orderInvalid(orderNumber)){
    this.errorMessage = config.orderInvalid;
}

My HTML displays this error:

<h1>{{ this.errorMessage }}</h1>

The problem is that it isn't parsing the {{ order.id }} and displays that string literally. Is there a way around this? I need {{ order.id }} to be the actual order id. I was looking at vue.compile but it was throwing various errors about missing root elements. I'm guess it is meant for components?

Vamsi Krishna · Accepted Answer · 2017-05-29 10:53:01Z

2

Your orderInvalid property of var config object is a string which is "Order {{ order.id }} is invalid"

So when you use <h1>{{ this.errorMessage }}</h1> you just using <h1>{{ "Order {{ order.id }} is invalid" }}</h1>

So I recommend using this:

var config = {
    orderInvalid: function(orderId){
        return "Order " + orderId + " is invalid"
    } 
}

And then

if(orderInvalid(orderNumber)){
    this.errorMessage = config.orderInvalid(orderNumber);
}

answered May 29, 2017 at 10:53

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CJD Over a year ago

Thanks, ideal solution!

Hatik · Accepted Answer · 2017-05-29 10:44:58Z

1

how about this

orderInvalid: "Order " + order.id + " is invalid"

answered May 29, 2017 at 10:44

Hatik

1,1591 gold badge16 silver badges37 bronze badges

Comments

Yash Kochar · Accepted Answer · 2017-05-29 11:38:53Z

1

The Handlebars or double mustaches {{ }} are used in html to use JS code in html tags. It is primarily syntactical sugar for including JavaScript objects inside your HTML code.

There is no need to use them in JavaScript code itself. If you write Handlebars inside JavaScript code, then JavaScript interpreter cannot interpret the symbol hence the Error.

In your case the solution should be simply:

var config = {
    orderInvalid: "Order " + {{ order.id }} + " is invalid"
}

Updated:

var config = {
    orderInvalid: "Order " + order.id + " is invalid"
}

edited May 29, 2017 at 11:38

answered May 29, 2017 at 11:02

Yash Kochar

4716 silver badges15 bronze badges

2 Comments

CJD Over a year ago

Thanks but that's not valid JS. "Uncaught SyntaxError: Unexpected token {"

Yash Kochar Over a year ago

Oh, totally forgot to remove those mustaches. I have updated the answer. Hope it helps, thanks for showing the Error

Collectives™ on Stack Overflow

Compiling inline text strings in Vue

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related