Vue.js - Interpolationsfehler - wie man Stil in v-bind umwandelt: Stil?

Question

Ich bin derzeit immer diese Konsole Fehlermeldung:

Interpolation in „Stil“ Attribut bewirkt, dass das Attribut in Internet Explorer verworfen werden. Verwenden Sie stattdessen v-bind: style.

, die durch dieses Stück Code verursacht wird:

<div class="placeholder-img" 
    style="background-image: url({{ travel._source.field_image[0].url }})"> 

Nun weiß ich nicht, wie diese Syntax, um einen ordnungsgemäßen zu ändern, wäre es nicht schwer sein, wenn das Hintergrundbild das nicht enthalten url() Teil, aber jetzt bin ich ein wenig verwirrt darüber, wie man dies richtig umgestalten kann. Könnte mir jemand helfen?

Prost.

Answer 1

<div class="placeholder-img" 
    v-bind:style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')'"> 

Wenn für v-bind Verwendung Kurzschreibweise:

<div class="placeholder-img" 
    :style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')'"> 

Bei Verwendung ES6 Syntax:

<div class="placeholder-img" 
    :style="{ 'background-image': `url(${travel._source.field_image[0].url})`">