Hola a todos, tengo algunas dificultades para incrementar un número en Firestore usando un botón simple en Vue js, ¿alguien me ayuda?
los objetivos son: * aumentar y disminuir el valor del número a través del firestore usando la colección Counter * ocultar el botón para evitar el spam
Yo también lo hice pero no funcionó:
<html> <HelloWorld msg="Welcome to Your Vue.js App"/> <span id="countspan">pleas wait...</span> <button id="incBtn" disabled>Increase</button> <button id="decBtn" disabled>Decrease</button> </html> <script> // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); let span = document.getElementById('countSpan'); let inc = document.getElementById('incBtn'); let dec = document.getElementById('decBtn'); let countVariable; window.onload = function(){ const dbRef=ref(db); get(child(dbRef, 'Counter')).then((snapshot)=>{ countVariable = Number(snapshot.val()); if(this.id=='incBtn') countVariable++; else countVariable--; update(ref(db,"/"),{Counter: countVariable}); span.innerHTML = countVariable; setTimeout(BtnEnable,500); }); } inc.addEventListener('click',IncDecCounter); dec.addEventListener('click',IncDecCounter); function IncDecCounter(){ BtnDisable(); const dbRef= ref(db); get(child(dbRef, 'Counter')).then((snapshot)=>{ countVariable = Number(snapshot.val()); span.innerHTML = countVariable; BtnEnable(); }); } function BtnEnable(){ inc.disabled=false; dec.disabled=false; } function BtnDisable(){ inc.disabled=true; dec.disabled=true; } </script>Para incrementar el contador en la base de datos, puede usar el operador de incremento atómico de Firebase:
import { ... , increment } from 'firebase/database'; // ... update(dbRef, { 'Counter': increment(1) });La disminución se realiza como un incremento con un valor negativo:
update(dbRef, { 'Counter': increment(-1) });