简体   繁体   中英

How do I increment field in Database for each entry on Vue.js

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">
  {{review.name}}
<h1><strong>{{review.form.name}}</strong>, from <strong>{{review.form.state}}</strong> said: </h1>
<p>{{review.form.review}}</p>
<button @click="removePost(review['.key']) "type="button" name="button">Remove Post</button>
<span >Thumbs up: {{review.form.thumbsUp}} </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
}

},

}

On the button click function, pass the form element that you loop through. In your case, thumbsUp(review.form) .

Then in your thumbsUp function,

thumbsUp(form) {
    form.thumbsUp +=1;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM