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

Question

这应该很简单，但尽管进行了搜索，我还是找不到任何解决方案。如何在 liquid 文件中使用 vue 模板标签？由于 Vue 和 liquid 使用相同的大括号，我无法呈现任何视图数据：

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

结果：

<img src>

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

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

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

它不会用 Vue 解析：

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

更新：我可以使用 v-bind 访问 Vue 数据：但我仍然需要能够使用定界符。

Answer 1

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

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

将与：

合作

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

Answer 2

从 Kevin Compton 停止的地方补充一点，这是你放置“分隔符”参数的地方：

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

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


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

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

Using vue.js in Shopify liquid templates

liquid

shopify

vue.js