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的人来说:(简写不会起作用）。此外，您必须为自定义分隔符使用单个花括号，否则它仍将尝试使用液体进行分析，例如：

completion suggesters

可以使用：

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

Answer 2

从 Kevin Compton 停止的地方添加一点，这是您放置“分隔符”参数的地方：

const ConditionalRendering = {
  data() {
    return {
      seen: true,
      someMessage: "My message"
    }
  },

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


Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

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

2 个答案: