Vue.jsデータバインドスタイルbackgroundImageが動作しない

Question

要素のイメージのsrcをバインドしようとしていますが、動作していないようです。私は "無効な式を取得しています。生成された関数本体：{backgroundImage：{url（image）}"。

documentationには、「Kebab-case」または「camel-case」のいずれかを使用すると記載されています。

<div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div>

相続人フィドル：https://jsfiddle.net/0dw9923f/2/

Answer 1

問題がbackgroundImageの値は、このような文字列にする必要があるということです。

<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div> 

ここで働いている簡略化フィドルだ：https://jsfiddle.net/89af0se9/1/

Re：ケバブケースのコメントです。

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div> 

つまり、v-bind:styleの値は単なるJavaScriptオブジェクトであり、同じ規則に従います。それを行うことができます。