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

Question

这应该是简单的,但尽管搜索我无法找到任何解决方案.如何在液体文件中使用vue模板标签？由于Vue和liquid都使用相同的花括号,我无法渲染任何视图数据:

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

结果是:

<img src>

我的父视图组件中有36个产品.

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

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

它不会用Vue解析:

  获取https://inkkas.com/collections/@ 404(未找到)

更新:我能够使用v-bind访问Vue数据:但我仍然需要能够使用分隔符.

Answer 1

显然使用Shopify,你不能将这些分隔符放在标签属性中,所以对于那些使用v-bind :(简写不起作用).此外,您必须为自定义分隔符使用单个花括号,或者它仍将尝试使用液体进行分析,例如:

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

将使用:

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