Je le code suivantv-bind ne fonctionne pas dans V pour
<div v-for="item in items">
<div class="background-wrapper" v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }"></div>
<h2>{{ item.title }}</h2>
</div>
Le style background-image est définie sur undefined et je ne sais pas pourquoi. Le travail item.title. Quand je change item.title en item.image il imprime l'adresse correcte.
Qu'est-ce que je fais de mal?
Il n'y a rien de mal avec votre code, assurez-vous que votre conteneur a effectivement une hauteur et une largeur, par exemple:
.background-wrapper {
width: 350px;
height: 150px;
}
Et que l'image existe en fait, voici le jsFiddle: https://jsfiddle.net/xvph0ehs/
Cet extrait fonctionne pour moi. Mais je ne travaillais pas avec les données que j'avais. Mais maintenant cela fonctionne parce que je l'ai changé pour v-bind: style = "{'background-image': 'url (\' '+ item.image +' \ ')'} – Ituhimux
Vous pouvez également utiliser le raccourci de 'v-bind: style' à': style = "{}" ', et cela s'applique à la plupart des attributs html' 'class =" {} "' au lieu de 'v-bind: class' – ricardoorellana
Pouvez-vous créer un extrait simple avec votre problème? – Jackowski
Un simple extrait fonctionne pour moi. –
Voulez-vous dire ceci: 'background-image: url (" undefined ");' par un style d'image de fond non défini? Si c'est le cas, l'attribut d'image est indéfini. Typo peut-être? –