为什么我的vue.js模板中收到无效的表达式?

时间:2019-06-14 21:08:13

标签: javascript vue.js

我在vue单个文件组件中收到此错误:

  Errors compiling template:

  invalid expression: Unexpected token { in

    {{ jobs[0].build_link }}

  Raw expression: v-bind:href="{{ jobs[0].build_link }}"

整行是:

 <td :style=tdStyle><a v-bind:href="{{ jobs[0].build_link }}">{{ jobs[0].build_link }}</a></td>

jobs是在组件的data方法中定义的,我可以console.log此数据而不会出现问题。

也不知道为什么,但是这行代码可以与内联模板vue.js脚本一起正常工作,但是在转换为单个页面组件后会抛出此错误。

2 个答案:

答案 0 :(得分:3)

我认为您有语法问题。请尝试不使用大括号。 例如:

<td :style=tdStyle><a v-bind:href="jobs[0].build_link">{{ jobs[0].build_link }}</a></td>

希望它能起作用。

答案 1 :(得分:1)

在这种情况下删除大括号是正确的,因为 v-bind 语法将评估表达式,但双大括号也会将其预先评估为字符串,因此您最终会尝试评估字符串。所以你本质上最终会得到类似 v-bind:href="https://google.com" 的东西,但 "https://google.com" 不是一个变量或表达式。有道理吗?