在Vue中编译内联文本字符串

Question

我在Vue中构建一个简单的应用程序。它很简单，我没有使用组件。

我将文本字符串存储在配置对象中，以便它们易于更改：

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

在Vue对象中，我将该数据推送到一般的错误变量中：

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

我的HTML显示此错误：

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

问题在于它没有解析{{ order.id }}并按字面意思显示该字符串。有没有解决的办法？我需要{{ order.id }}作为实际的订单ID。我正在查看vue.compile，但它丢失了关于缺少根元素的各种错误。我猜它是用于组件吗？

Answer 1

orderInvalid对象的var config属性是"Order {{ order.id }} is invalid"

的字符串

因此，当您使用<h1>{{ this.errorMessage }}</h1>时，只需使用<h1>{{ "Order {{ order.id }} is invalid" }}</h1>

所以我建议使用它：

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

然后

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

Answer 2

这个怎么样

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

Answer 3

html中使用Handlebars或双胡子 {{}} 来在html标签中使用JS代码。在HTML代码中包含JavaScript对象主要是语法糖。

不需要在JavaScript代码本身中使用它们。如果你在JavaScript代码中编写Handlebars，那么JavaScript解释器就无法解释符号，因此错误。

在您的情况下，解决方案应该简单：

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

已更新：

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