v-bind无法在v-for中工作

Question

我有以下代码

<div v-for="item in items">
    <div class="background-wrapper" v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }"></div>
    <h2>{{ item.title }}</h2>
</div>

背景图片样式设置为undefined，我不知道原因。 item.title有效。当我将item.title更改为item.image时，会打印出正确的网址。

我做错了什么？

Answer 1

您的代码没有任何问题，请确保您的容器实际上有高度和宽度，例如：

.background-wrapper {
  width: 350px;
  height: 150px;
}

图像确实存在，这是JSFiddle：https://jsfiddle.net/xvph0ehs/