问题
This should be simple but despite searching I was unable to find any solution to this. How do you use vue template tags within a liquid file? Since both Vue and liquid use the same curly brackets, I'm unable to render any of my view data:
<img src="{{ product.featured_image }}" />
results in:
<img src>
There are 36 products in my parent view component.
When I try to use custom delimiters:
new Vue({
delimiters: ['@{{', '}}'],
It won't parse with Vue:
GET https://inkkas.com/collections/@ 404 (Not Found)
UPDATE: I'm able to access Vue data with v-bind: but I still need to be able to use delimiters also.
回答1:
Apparently with Shopify, you can't put these delimiters in the tag attributes at all so for those use v-bind: (the shorthand won't work). Also you have to use a single curly brace for your custom delimiter or it will still try to parse with liquid, for example:
delimiters: ['${', '}']
will work with:
<span class="title">${ product.title }</span>
来源：https://stackoverflow.com/questions/43505094/using-vue-js-in-shopify-liquid-templates