Question

有一个名为my-comp的vuejs组件，它带有给定的数据，我想迭代它的元素并打印它们：

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

如果我的text对象的d属性中没有花括号，它可以正常工作但是如果有，会抛出一个TypeError异常：TypeError: res is undefined和唯一的方法我要知道修复它，就是用反斜杠来逃避大括号：将{{ token }}更改为{\{ token }\}。

有没有更方便的方法来忽略vuejs中的花括号或我做错了什么？这是一个working code with no {{}}，这里是how {{}} breaks it＆amp;我使用的是版本0.12.16。

Answer 1

如果你像你一样传递道具，并且希望Vue评估此内容，则需要使用以下方式绑定它：:your-data="expression"

我已更新了您的fiddle

同样在你的情况下，你不应该在组件的第一个元素中进行v-for（你将拥有fragment instance）

并且您不需要在Vue数据中执行任何操作，因为在使用v-bind指令时，数组和对象将由vue解析。

如何在vue.js中使用花括号忽略自定义标记

1 个答案: