Vue.js стиль привязки данных привязкиImage не работает

Question

Я пытаюсь связать src изображения в элементе, но он, похоже, не работает. Я получаю «Недопустимое выражение. Тело сгенерированной функции: {backgroundImage: {url (image)}».

documentation говорит, что использует либо «кебаб-футляр», либо «верблюжьей кейс».

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

Heres скрипку: 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 и по тем же правилам.