javascript - Vue2.js 和 Firebase 使用 v-for 和 :key 循环无法获得价值

Question

使用 v-for 循环浏览 Firebase 项目，并试图为每个项目获取一个值（imgurl）。这是firebase对象的几行：

火力基地数据

这是我在 App.vue 中的脚本代码。

<script>
import Firebase from "firebase";
let config = {
   …all correct blah blah…
};
let app = Firebase.initializeApp(config);
let db = app.database();
let itemsRef = db.ref("tblItems");
export default {
  name: "app",
  firebase: {
    items: itemsRef
  },
  data() {
    return {
      styleObject: {
        backgroundImage: "" //RIGHT IN HERE I NEED item.imgname BUT CAN'T FIGURE OUT SYNTAX.
           }      
    };
  }
};

这是我使用 v-for 和 key 循环并调用 StyleObject 的地方。

<template>
  <div id="app">
      <div v-for="item in items" :key="item.id" v-bind:style="styleObject"> 
         <h1>{{ item.title }}</h1>
         <h2>{{ item.author }}</h2> 
    </div> 
    <router-view/>
  </div>
</template>

一切正常，除了我不知道如何在 RIGHT IN HERE 注释所在的位置获取item.imgname，因此我可以将它用于 style= 属性中的背景图像（每个 div 都有自己的背景图像）。非常感谢任何帮助。

Answer 1

在我看来，最简单的方法是将 de div 制作成一个新组件并将图像名称作为道具传递给它。您的组件将如下所示：

Vue.component('exampleDiv', {
  props: ['imgname','title','author'],
  template: '<div :style="styleObject"> 
     <h1>{{ title }}</h1>
     <h2>{{ author }}</h2> 
     </div> ',
    data() {
        return {
            styleObject: {
                backgroundImage: this.imgname
            }
         }
})

然后，您可以像这样在代码中调用该组件：

<template>
      <div id="app">
          <exampleDiv v-for="item in items" 
               :key="item.id" :title="item.title" 
               :author="item.author" :imgname = "item.imgname"> 
        </exampleDiv> 
        <router-view/>
    </div>
</template>