How to ignore custom tokens using curly braces in vue.js

Question

There is a vuejs component called my-comp with a given data that I want to iterate on its elements and print them:

<my-comp json-data='[{"id":1,"text":"Hello"},{"id":2,"text":"World"}]' inline-template>
    <div v-repeat="d: data">
        <div>
            {{ d.id }}
        </div>
        <div>
            {{ d.text }}
        </div>
    </div>
</my-comp>

And it works fine if there is no curly braces within text property of my d object but if there is, a TypeError exception will be thrown: TypeError: res is undefined and the only way I know to fix it, is to escape curly braces with back slash: change {{ token }} to {\{ token }\}.

Is there any more convenient way to ignore curly braces within vuejs or Am I doing something wrong? Here is a working code with no {{}}, and here is how {{}} breaks it & I'm using version 0.12.16.

I'm not sure which version if Vue you're using but you can do json-data.literal='...' in the latest beta I believe. I'm not sure how to approach it in this version. I imagine just trying to read the attribute off the element itself could work but Vue is telling me that component is a text node (I'm guessing something related to inline-template. — Bill Criswell
– Bill Criswell, Commented Oct 13, 2015 at 14:52
latest stable one: v0.12.16 So I guess I should wait till the next stable version (v1.*) — Hossein Jazayeri
– Hossein Jazayeri, Commented Oct 14, 2015 at 6:48
I think this doesn't happen in newer versions of Vue. If you want to include literal curly brackets, have a look at v-pre — Flimm
– Flimm, Commented Sep 30, 2020 at 9:00

Christophe · Accepted Answer · 2015-11-11 09:55:51Z

0

If you pass a props like you did, and you want Vue to evaluate this content,you need to bind it using: :your-data="expression"

I've updated your fiddle

Also in your case you shouldn't do v-for in the first element of your component (you would have a fragment instance)

And you don't need to do anything in your Vue data because arrays and objects are parsed by vue when using the v-bind directive.

answered Nov 11, 2015 at 9:55

Christophe

1921 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to ignore custom tokens using curly braces in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related