Vue.js 将本地循环变量传递给 v-bind:style答案

【问题标题】：Vue.js pass local loop variable to v-bind:styleVue.js 将本地循环变量传递给 v-bind:style
【发布时间】：2020-07-15 08:21:35
【问题描述】：

我遍历一个列表并想根据该列表中的属性设置背景图像。但在 v-bind:stlye 中，该属性未定义。

如何通过？

        <div class="content" v-bind:key="slide.id" v-for="slide in show.slides">
            <div class="slide">
                <div class="model"
                     :style="{ backgroundImage:
                        `url(${strapiUrl + slide.model_media.Media.url})` }">
                    <div class="title">{{slide.title}}</div>
            </div>
        </div>

【问题讨论】：

strapiUrl 是在哪里定义的？此外，您最好将其抽象为一个方法。
strapiUrl 在 data() 中定义。
也许你应该检查你的 div 嵌套结构

标签： vue.js vue-component

【解决方案1】：

也许将整个样式绑定抽象为一个方法更容易。在您的模板中，您可以简单地执行以下操作：

<div class="model" v-bind:style="modelStyle(slide)">

然后，在您的组件中，创建一个modelStyle() 方法：

modelStyle: function(slide) {
  return {
    backgroundImage: url(`${this.strapiUrl}${slide.model_media.Media.url}`);
  };
}

【讨论】：