2015-10-13 144 views
2

有一种vuejs组件调用我-COMP与给定的数据,我想重复其内容并打印出来:如何忽略定制令牌vue.js使用大括号

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

而且它的工作原理如果在我的d对象的text属性中没有大括号,但是如果存在,则会抛出TypeError异常:TypeError: res is undefined并且我知道修复它的唯一方法是使用反斜杠转义大括号:将{{ token }}更改为{\{ token }\}

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

+0

我不确定您使用的是Vue的哪个版本,但是您可以在我相信的最新测试版中执行'json-data.literal ='...''。我不确定在这个版本中如何处理它。我想象只是试图读取元素本身的属性可以工作,但Vue告诉我,组件是一个文本节点(我猜与'inline-template'有关的东西。 –

+0

latest stable one:v0.12.16 所以我我应该等到下一个稳定版本(v1。*) –

回答

0

如果传递的道具像你这样,你想的Vue此内容评估,则需要使用其绑定::your-data="expression"

我已经更新了你在你的情况下,你不该fiddle

而且在你的组件的第一个元素中不会做v-for(你将有一个fragment instance

而且你不需要在你的Vue数据中做任何事情,因为数组和对象在使用v-绑定指令。