在Shopify liquid模板中使用vue.js

这应该是简单的，但尽管搜索，我无法找到任何解决办法。如何在liquid文件中使用vue模板标记？由于Vue和liquid使用相同的花括号，因此我无法渲染任何视图数据：

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

它不会使用Vue进行分析：

获取404（未找到）

---

更新：我可以使用v-bind访问Vue数据：但我还需要能够使用分隔符。

显然，对于Shopify，您根本无法将这些分隔符放在标记属性中，因此对于使用v-bind的用户：（简写法不起作用）。此外，您必须为自定义分隔符使用一个大括号，否则它仍将尝试使用liquid进行解析，例如：

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

将与以下人员合作：

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

${product.title}

在凯文·康普顿（Kevin Compton）的结束处添加一点，这是您放置“delimiters”参数的地方：

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

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


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

---

使用绑定代替插入

——以防

产品。特色图片

是JS内容。此外，您还可以设置自己的vuejs分隔符—由于某种原因，绑定现在会将整个元素从dom中删除。控制台会说什么吗？不会，绑定时不会。当我尝试使用自定义分隔符时，它不会使用Vue进行解析：new Vue（{分隔符：['@{{''，'}}']。。。。

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

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

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


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