在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

你orderInvalidvar 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用于html标签用JS代码。它主要是在HTML代码中包含JavaScript对象的语法糖。

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

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

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

更新时间：

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