在Shopify液体模板中使用vue.js

这应该很简单，但尽管搜索我无法找到任何解决方案。你如何在液体文件中使用vue模板标签？由于两个Vue公司和液体使用相同的大括号，我无法提供任何我的观点的数据：在Shopify液体模板中使用vue.js

<img src="{{ product.featured_image }}" />

结果：

<img src>

有36种产品在我父视图组件。

当我尝试使用自定义分隔符：

new Vue({ 
    delimiters: ['@{{', '}}'],

它不会与Vue的解析：

GET https://inkkas.com/collections/@ 404（未找到）

UPDATE：我能访问Vue数据与v-bind：但我仍然需要能够使用分隔符。

来源

2017-04-19 Kevin Compton

使用结合，而不是插'' - 如果'product.featured_image'是JS的东西。你也可以设置你自己的vuejs分隔符 - http://stackoverflow.com/questions/42166251/vue-js-does-not-render-correctly-using-template/42166634#42166634 –

由于某种原因，绑定是采取整个元素现在都离开了dom。 –

控制台说什么？ –

显然，使用Shopify，您不能将这些分隔符放在标签属性中，因此对于那些使用v-bind：（简写不起作用）。此外，你必须使用一个大括号为您的自定义分隔符，否则将仍然试图用液体来分析，例如：

delimiters: ['${', '}']

将工作带：

<span class="title">${ product.title }</span>

来源

2017-04-19 21:55:24

在Shopify液体模板中使用vue.js

回答

相关问题