Question

在产品页面中，我试图显示自定义Vue组件。为简便起见，该组件根据给定的产品ID显示Firebase数据库中的一些信息。

最初，我试图将其设为Shopify应用，以便可以访问其API。我实现了OAuth，可以检索所需的信息。但是，实际上将组件包含在商店中并没有成功。

在Shopify中包含Vue的最佳方法是什么？

我尝试将脚本文件直接包含在模板文件内，摘要内，并将它们包含在全局脚本标签内。但是我尝试过的任何方法都无法渲染甚至一个简单的组件。

product.liquid 内部：


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

在Vue开发人员工具内部，该组件显示在DOM内，但显示“ Hello Vue！”。消息未按预期显示。

控制台中没有其他错误。哪个最令人困惑。

对于将Vue纳入Shopify的正确方法的任何见解，将不胜感激。

Answer 1

默认情况下，液体文件将解析{{ }}标签。因此，您需要更改模板机制。以下是适用于Shopify Liquid文件的更新代码-

<div id="app">
  ${ message }
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    delimiters: ['${', '}']
  })
</script>

基本上，我已经添加了一些定界符，它们会检查以查找模板，并且它们不同于Shopify解析，这将导致shopify不解析那些持有者。您可以在此处详细了解有关Vue的定界符-Link

在Shopify商店中嵌入Vue组件

1 个答案: