I am receiving this error in my vue single file ponent:

  Errors piling template:

  invalid expression: Unexpected token { in

    {{ jobs[0].build_link }}

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

The full line is:

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

jobs is defined in the data method of my ponent and i can console.log this data without issue.

Also not sure why, but this line works fine with an inline-template vue.js script but throws this error after converting over to a single page ponent.

I am receiving this error in my vue single file ponent:

  Errors piling template:

  invalid expression: Unexpected token { in

    {{ jobs[0].build_link }}

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

The full line is:

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

jobs is defined in the data method of my ponent and i can console.log this data without issue.

Also not sure why, but this line works fine with an inline-template vue.js script but throws this error after converting over to a single page ponent.

• javascript
• vue.js

2 Answers 2

I think you have a syntax problem. Please try without curly braces. for ex:

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

Hope it works..

Removing the curly braces is correct in this case because the v-bind syntax is going to evaluate the expression, but double curly braces will also pre-evaluate it to a string so you end up trying to evaluate a string. So you essentially end up with something like v-bind:href="https://google.", but "https://google." is not a variable or expression. Make sense?