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

Most helpful comment

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

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.

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.

Before

screen shot 2016-07-19 at 10 45 27 pm

After

(I've highlighted the part in red)

screen shot 2016-07-19 at 10 45 02 pm

@skyronic what RegExp tool is that? looks very useful...

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

@skyronic thx! I use http://rubular.com/ a lot. It tests with the ruby lib but works fine too.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

manniL picture manniL  ·  3Comments

powelski picture powelski  ·  6Comments

Aaron-Bird picture Aaron-Bird  ·  5Comments

dscherbakov picture dscherbakov  ·  4Comments

peterkorgaard picture peterkorgaard  ·  6Comments