这应该很简单,但尽管搜索了一下,我还是找不到任何解决方案.如何在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相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

在计算(computed)属性上调用数组方法

处理多张卡片中的按钮

为什么我在 Vue npm run serve 的 localhost 中得到无法获取

Vue,Composition API:如何从react 式转换中跳过深度嵌套的属性?

Axios Intercept 在第一次调用时未从 localStorage 应用令牌

CLI 3 - 如何为 CSS/Sass 创建vendor bundle ?

Vue.js + Vuex:如何改变嵌套项状态?

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

错误:[vuex] 期望字符串作为类型,但发现未定义

如何在 NPM 上创建和发布 Vuejs 组件

这是 v-on:change 的正确用法吗?

安装后运行computed计算函数

Nuxt.js - API 调用的最佳场所

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据?

克隆元素并附加到 DOM 的正确方法

在 Vue 应用程序中创建一个类的单个实例

如何在 vue.js 中通过单击事件发出值

VueJS 按键查找元素

在 Vuejs 中全局导入 Axios 方法