Зацикливание Vue2.js и Firebase с v-for и :key не может получить значение

Перебираем проект Firebase, используя v-for, и чертовски долго пытаемся получить одно значение (imgurl) для каждого элемента. Вот пара строк из объекта firebase:

данные 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 и ключ, и вызываю 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>

Все работает нормально, за исключением того, что я не могу понять, как получить item.imgname, где находится комментарий RIGHT IN HERE, чтобы я мог использовать его для фонового изображения в атрибуте style= (каждый div имеет свой собственное фоновое изображение). Любая помощь высоко ценится.


firebase javascript firebase-realtime-database vuejs2 v-for
person Alan Simpson    schedule 05.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На мой взгляд, самый простой способ сделать это — превратить 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>
person Imre_G    schedule 05.12.2017
comment
Спасибо, я все это прочитал, но до сих пор не понял волшебный синтаксис того, что я пытаюсь сделать. Я пробовал все, что казалось мне разумным до сих пор. Но, очевидно, я еще чего-то не понимаю. - person Alan Simpson; 06.12.2017
comment
Пытался вставить код. У меня нет времени, чтобы протестировать это всесторонне прямо сейчас. Пожалуйста, дайте мне знать, если это сработает для вас. - person Imre_G; 06.12.2017
comment
Спасибо, но он не обновляется при каждом проходе цикла. Это дает мне весь массив. Мне нужно item.imgname, уникальное для каждого прохода цикла, например {{item.imgname}} в шаблоне, но в формате, в котором я могу его использовать. как имя изображения в style=background-image(...) для каждого элемента div. Смотрите мой обновленный код в предыдущем ответе. Я продолжаю проверять документы, но я не могу понять эту вещь. - person Alan Simpson; 06.12.2017
comment
Я лучше понимаю, что ты хочешь сделать сейчас. Пожалуйста, смотрите мой обновленный ответ. - person Imre_G; 07.12.2017