vuefile
1<template> 2<div> 3{{getId({id:"1"})}} 4</div> 5</template> 6 7<script> 8export default { 9methods: { 10 async getId(item) { 11 const items = await this.$store.dispatch('getId',item.id) 12 return items; 13 }, 14} 15} 16</script>
storefile
1import firebase from 'firebase' 2 3export default { 4state: { 5 db: null, 6}, 7 8getters: { 9 db(state) { 10 if (state.db !== null) { 11 return state.db; 12 } 13 const firebaseConfig = { 14 apiKey: "********", 15 authDomain: "********", 16 databaseURL: "********", 17 projectId: "********", 18 storageBucket: "********", 19 messagingSenderId: "********", 20 appId: "********" 21 }; 22 firebase.initializeApp(firebaseConfig); 23 state.db = firebase.firestore(); 24 return state.db; 25 }, 26} 27 28actions: { 29 async getId(context,id) { 30 console.log(id)・・・① 31 const items = await context.getters.db.collection("items").where("id", "==",id).get() 32 const data = items.docs.map(doc => { 33 return doc.data(); 34 }); 35 console.log("data表示",data)・・・② 36 return data; 37 }, 38} 39}
①は適切なidつまり"1"が表示され、②は"id", "==",idとなる適切な配列がfirestoreから返ってくるのですが、①②ともに無限に表示される状況です。
エラーメッセージは以下の通り
[Vue warn]: You may have an infinite update loop in a component render function.
これはなぜでしょうか?どこが誤っているのでしょうか?
あなたの回答
tips
プレビュー