Shopify 액체 템플릿에서 vue.js 사용

Question

이것은 간단해야하지만 검색에도 불구하고 이에 대한 해결책을 찾지 못했습니다. 액체 파일 내에서 vue 템플릿 태그는 어떻게 사용합니까? 뷰 및 액체은 동일한 중괄호 모두 이후, 나는 내보기 데이터의 렌더링 드릴 수 없습니다 : 내 부모 뷰 구성 요소의 36 개 제품이 있습니다

<img src> 

:에

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

결과.

내가 정의 구분 기호 사용하려고하면 :

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

그것은 뷰와 구문 분석 할 것이다 :

는 https://inkkas.com/collections/@ 404 (찾을 수 없음)

UPDATE를 GET : 나는 액세스 할 수있어 v-bind를 사용하여 데이터를 뷰하기 :하지만 여전히 구분 기호를 사용할 수 있어야합니다.

Answer 1

분명히 Shopify에서는 이러한 구분 기호를 v-bind를 사용하는 태그 속성에 넣을 수 없습니다 (약식은 작동하지 않음). 또한 당신은 당신의 정의 구분 기호에 대해 하나의 중괄호를 사용하거나 여전히 예를 들어, 액체 구문 분석을 시도합니다 :

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