javascript - 在 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的属性(property)object 是一个字符串 "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);
}