CODEWITHSUNDEEP
javascriptvue.js
david
david

Reputation: 6785

Why am I receiving invalid expression in my vue.js template?

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

  Errors compiling 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 component 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 component.

Upvotes: 1

Views: 3760

Answers (2)

Clint Randall
Clint Randall

Reputation: 11

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.com", but "https://google.com" is not a variable or expression. Make sense?

Upvotes: 1

PANKAJ NAROLA
PANKAJ NAROLA

Reputation: 164

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..

Upvotes: 5

Related Questions