Im trying to run a function in each of my child components using ref, however it seems to do nothing when i run it.
Each of the child components is based upon data from an API. When call updateUserDataDB
it fetches said api, uploads to firestore and changes it owns variables. However currently this has to be done via a button on each child component. I would like to setup a button on the parent component to run this function on all children. For this i have looked at this article which was linked in another question, however to avail. Perhapds is has something to do with using the same ref in all children? Any help or tips is appreciated.
My code looks as such
App.vue (parent)
<template>
<body>
<button class="btn-right" @click ="updateUserDataDB"> Update all PlayerBoxes</button>
<p v-for="country in countries" :key="country">
<PlayerBox :players="country" ref="refresh_db"/>
</p>
</body>
</template>
<script>
import { query, collection, getDocs, orderBy, setDoc, doc } from "firebase/firestore"
import db from './firebase/init.js'
import PlayerBox from './components/PlayerBox.vue'
import{ref} from "vue"
export default {
name: 'App',
components: { PlayerBox},
data() {
return {
players: [],
}
},
created() {
this.getPlayerFirestore()
},
methods: {
updateUserDataDB(){
console.log("clicked")
this.$refs.refresh_db.updateUserDataDB()
},
async getPlayerFirestore() {
// query to get all docs in 'users' collection
const q = query(collection(db, 'users'), orderBy('elo', 'desc'));
const querySnap = await getDocs(q);
// add each doc to 'players' array
querySnap.forEach((doc) => {
this.players.push(doc.data())
})
},
</script>
PlayerBox.vue (child)
<template>
...
</template>
<cript>
import { getDoc, updateDoc , doc} from "firebase/firestore"
import db from '../firebase/init.js'
import {ref} from "vue";
export default ({
props:["players"],
data(){
...},
methods: {
async updateChampionStats(){
...
},
async updateUserDataDB() {
},
}
})