I have a Vue app which has a form which you can submit and all the submissions are shown on a different page with the option to delete them or give each a thumbs up. The issue I am having is targeting each entries thumbsUp to increment it by one. For example, I have a function "thumbsUp" which returns return this.forms.form[1].thumbsUp++
on each click, but I would like it to target each entry automatically. Forum submission:
<script>
import {formRef} from '../firebase' //imports reference to form object stored in firebase
export default {
data(){
return{
submitted:false,
form:{
name:'',
state:'',
review:'',
thumbsUp: 0
},
name:'hey',
}
},
methods: {
//pushes this.form object as {form} to firebase using the formRef
submitForm(){
formRef.push({form: this.form, edit: false})
this.submitted = true
}
}
}
</script>
Forum review page:
<template lang="html">
<div class="" class="wrapper">
<div v-for="review of forms" class="reviews">
<h1><strong></strong>, from <strong></strong> said: </h1>
<p></p>
<button @click="removePost(review['.key']) "type="button" name="button">Remove Post</button>
<span >Thumbs up: </span>
<button @click="thumbsUp" type="button" name="button">Thumbs up!</button>
</div>
</div>
</template>
<script>
import {formRef} from '../firebase'
export default {
data(){
return{
}
},
firebase:{
forms: formRef //stores form reference inside of "forms"
},
methods:{
//takes key from child of formRef to remove post
removePost(key){
formRef.child(key).remove()
},
thumbsUp(){
return this.forms.form[1].thumbsUp++ //needs fix
}
},
}
Aucun commentaire:
Enregistrer un commentaire