Vue: Bad parsing when bound data contains a backtick

Created on 14 Jul 2016 · 5Comments · Source: vuejs/vue

Vue.js version

1.0.26

Reproduction Link

http://codepen.io/sirlancelot/pen/zBPVBo?editors=1010#0

Steps to reproduce

Bind an inline object with a value containing the backtick character

What is Expected?
Object is reproduced properly in the data model

What is actually happening?
scope. is being added to everything between the backtick and an escaped quote.

We're using props to curry an initial data model from the server to the browser. We're doing it in a manner similar to the example shown in the CodePen. Basically, our root Vue instance contains a list of props that will show up on the element and are populated by the server.

bug

Source

sirlancelot

Most helpful comment

@LinusBorg - I used https://www.debuggex.com/ very handy!

skyronic on 22 Jul 2016

👍10

All 5 comments

As a temporary workaround, you can bypass the issue by escaping the backtick.

//broken
:items="[{'title':'one','value':1},{'title':'t`wo','value':2}]"

//works
:items="[{'title':'one','value':1},{'title':'t\`wo','value':2}]"

For anyone investigating, it seems that the issue doesn't occur when the array contains only a single element.

Etheryte on 14 Jul 2016

I made a change to a regular expression and this seems to be working fine now. However this seemed like a very important regexp and I am not sure of the patch.