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

Posted 2023-02-15

【中文标题】在 Shopify 液体模板中使用 vue.js

【英文标题】：Using vue.js in Shopify liquid templates

【发布时间】：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 分隔符 - ***.com/questions/42166251/…

由于某种原因，绑定现在将整个元素从 dom 中取出。

控制台说什么了吗？

不，不是在我绑定的时候。当我尝试使用自定义分隔符时，它不会使用 Vue 进行解析：new Vue( delimiters: ['@', ''], ....

【参考方案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')