在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:但我仍然需要能够使用分隔符。
答
显然,使用Shopify,您不能将这些分隔符放在标签属性中,因此对于那些使用v-bind:(简写不起作用)。此外,你必须使用一个大括号为您的自定义分隔符,否则将仍然试图用液体来分析,例如:
delimiters: ['${', '}']
将工作带:
<span class="title">${ product.title }</span>
使用结合,而不是插'' - 如果'product.featured_image'是JS的东西。 你也可以设置你自己的vuejs分隔符 - http://*.com/questions/42166251/vue-js-does-not-render-correctly-using-template/42166634#42166634 –
由于某种原因,绑定是采取整个元素现在都离开了dom。 –
控制台说什么? –