vue.js - update - vue meta head script

Usar vue.js en las plantillas líquidas de Shopify

Question

Esto debería ser simple, pero a pesar de buscar no pude encontrar ninguna solución a esto. ¿Cómo se usan las etiquetas de plantilla vue dentro de un archivo líquido? Como Vue y Liquid usan los mismos corchetes, no puedo representar ninguno de mis datos de vista:

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

resultados en:

<img src>

Hay 36 productos en mi componente de vista padre.

Cuando intento usar delimitadores personalizados:

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

No analizará con Vue:

OBTENER https://inkkas.com/collections/@ 404 (no encontrado)

ACTUALIZACIÓN: puedo acceder a los datos de Vue con V-bind: pero también necesito poder usar delimitadores.

Answer 1

Aparentemente con Shopify, no puedes poner estos delimitadores en los atributos de etiqueta, así que para aquellos que usan v-bind: (la abreviatura no funcionará). También debe usar un solo corchete para su delimitador personalizado o aún tratará de analizar con líquido, por ejemplo:

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

trabajará con:

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