When looping through a list using v-for, I am calling a method for each item. The method returns the necessary object, but I need to be able to access that information in other parts of my .card. For example, I want the {{name}} to display the sponsor's name returned by the method. Typically, I would store the data in Vue data and access it via the item, but with over 200 items this doesn't seem like the best approach (unless I'm missing something in my logic).
Here is how my VueJS setup looks:
HTML:
<div v-for="deal in deals">
<div class="card">
<h3>{{deal.name}}</h3>
<p>{{ getSponsor(key) }}</p>
<p>{{sponsor.name}}</p>
</div>
</div>
JS:
firebase () {
return {
deals: db.ref('deals'),
businesses: db.ref('businesses')
}
},
methods: {
getDealSponsor (key) {
db.ref('businesses').child(key).on('value', snap => {
return snap.val()
})
}
}
JSON:
deals
-SomeDeal(Firebase Key)
name: "Some Deal"
provider: -SomeBusiness (Firebase Key)
businesses
-SomeBusiness (Firebase Key)
name: "Some Business Name"