Использование vue.JS в шаблонах жидкости Shopify

Это должно быть просто, но, несмотря на поиск, я не смог найти никакого решения для этого. Как использовать теги шаблонов vue в жидком файле? Поскольку Vue и liquid используют одни и те же фигурные скобки, я не могу отобразить какие-либо из моих данных представления:

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

результаты:

<img src>

в моем компоненте родительского представления есть 36 продуктов.

когда я пытаюсь использовать пользовательские разделители:

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

он не будет разбирать с Vue:

  Получить https://inkkas.com/collections/@ 404 (Не Найдено)

обновление: я могу получить доступ к данным Vue с помощью v-bind: но мне все равно нужно иметь возможность использовать разделители.

6
liquid shopify vue.js

1 ответов

по-видимому, с Shopify вы не можете поместить эти разделители в атрибуты тегов вообще, поэтому для тех, кто использует v-bind: (стенография не будет работать). Также вам нужно использовать одну фигурную скобку для вашего пользовательского разделителя, или он все равно попытается разобрать жидкость, например:

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

совместимость с:

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