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

【问题标题】：Using vue.js in Shopify liquid templates在 Shopify 液体模板中使用 vue.js
【发布时间】：2017-09-16 05:39:47
【问题描述】：

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

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

结果：

<img src>

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

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

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

它不会用 Vue 解析：

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

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

【问题讨论】：

使用绑定代替插值<img :src="product.featured_image" /> - 如果product.featured_image 是JS 的东西。你也可以设置自己的 vuejs 分隔符 - stackoverflow.com/questions/42166251/…
由于某种原因，绑定现在将整个元素从 dom 中取出。
控制台说什么了吗？
不，不是在我绑定的时候。当我尝试使用自定义分隔符时，它不会使用 Vue 进行解析：new Vue({ delimiters: ['@{{', '}}'], ....

标签： vue.js shopify liquid

【解决方案1】：

显然，对于 Shopify，您根本不能将这些分隔符放在标签属性中，因此对于那些使用 v-bind: 的人来说（速记不起作用）。此外，您必须为自定义分隔符使用一个大括号，否则它仍会尝试使用液体进行解析，例如：

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

适用于：

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

【讨论】：

【解决方案2】：

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

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

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


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

【讨论】：