无涯教程网

在 Shopify liquid模板中使用 vue.js

发布于04月20日

这应该很简单，但尽管搜索了一下，我还是找不到任何解决方案.如何在liquid文件中使用vue模板标记？由于Vue和liquid都使用相同的花括号，因此我无法渲染任何视图数据:

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

结果如下:

<img src>

"我的父视图"组件中有36种产品.

当我try 使用自定义分隔符时:

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

它不会用Vue解析:

获取https://inkkas.com/collections/@ 404(未找到)

更新:我能够使用v-bind访问Vue数据:但我仍然需要能够使用分隔符.

推荐答案

显然，在Shopify中，你根本不能把这些分隔符放在标签属性中，所以对于那些使用v-bind的人来说:(简写法不起作用).此外，您必须为自定义分隔符使用一个大括号，否则它仍将try 使用liquid进行解析，例如:

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

将与以下人员合作:

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

Vue.js相关问答推荐

Vue.js编译的render函数不起作用

过渡如何在 Vue JS 3 中的图像上工作？

如何使用带有自定义标签和类的`transition-group`

带有外部配置文件的 Vue js

未捕获的类型错误：无法读取未定义的属性initializeApp

在textbox文本框 VueJS 2 中键入时搜索列表

如何在 Vue.js 中触发点击 ref

Polyfill for ie

在 v-for 的情况下如何从 v-model 输入更新 Vuex 存储

如何创建 vuetify 工具栏链接下拉菜单？

将 props 传递给 Vue 组件中的元素属性

Vue test-utils 如何测试 router.push()

Vue router路由，Root Vue 没有数据？

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性？

动态注册本地 Vue.js 组件

vue组件中导入和使用three.js库

是否可以从 vue-devtools 中排除 vue 事件和 vuex Mutations？

从 vuex 存储访问 $vuetify 实例属性

Vue中的嵌套循环

Vue 3 组合 API 数据()函数

实用课程推荐

相关教程推荐