在Shopify液體模板中使用vue.js

這應該很簡單，但儘管搜索我無法找到任何解決方案。你如何在液體文件中使用vue模板標籤？由於兩個Vue公司和液體使用相同的大括號，我無法提供任何我的觀點的數據：在Shopify液體模板中使用vue.js

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

結果：

<img src>

有36種產品在我父視圖組件。

當我嘗試使用自定義分隔符：

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

它不會與Vue的解析：

GET https://inkkas.com/collections/@ 404（未找到）

UPDATE：我能訪問Vue數據與v-bind：但我仍然需要能夠使用分隔符。

來源

2017-04-19 Kevin Compton

使用結合，而不是插'' - 如果'product.featured_image'是JS的東西。你也可以設置你自己的vuejs分隔符 - http://stackoverflow.com/questions/42166251/vue-js-does-not-render-correctly-using-template/42166634#42166634 –

由於某種原因，綁定是採取整個元素現在都離開了dom。 –

控制檯說什麼？ –

顯然，使用Shopify，您不能將這些分隔符放在標籤屬性中，因此對於那些使用v-bind：（簡寫不起作用）。此外，你必須使用一個大括號爲您的自定義分隔符，否則將仍然試圖用液體來分析，例如：

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

將工作帶：

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

來源

2017-04-19 21:55:24

在Shopify液體模板中使用vue.js

回答

相關問題