为什么我在我的 vue.js 模板中收到无效的表达式？答案

【问题标题】：Why am I receiving invalid expression in my vue.js template?为什么我在我的 vue.js 模板中收到无效的表达式？
【发布时间】：2019-10-29 12:03:32
【问题描述】：

我在我的 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 脚本一起使用，但在转换为单个页面组件后会引发此错误。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为你有语法问题。请尝试不使用花括号。例如：

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

希望它有效..

【讨论】：

您的v-bind:href 值中有一个小错字。应该是jobs 而不是obs。