Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/388.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何为Vue.js上的每个条目增加数据库中的字段_Javascript_Html_Vue.js - Fatal编程技术网

Javascript 如何为Vue.js上的每个条目增加数据库中的字段

Javascript 如何为Vue.js上的每个条目增加数据库中的字段,javascript,html,vue.js,Javascript,Html,Vue.js,我有一个Vue应用程序,它有一个表单,你可以提交,所有提交的内容都显示在不同的页面上,可以选择删除它们或给每个人竖起大拇指。我遇到的问题是将每个条目的thumbsUp设置为一个增量。例如,我有一个函数“thumbsUp”,它返回 在每次单击时返回此.forms.form[1]。thumbsUp++,但我希望它自动针对每个条目。 论坛提交: <script> import {formRef} from '../firebase' //imports reference to f

我有一个Vue应用程序,它有一个表单,你可以提交,所有提交的内容都显示在不同的页面上,可以选择删除它们或给每个人竖起大拇指。我遇到的问题是将每个条目的thumbsUp设置为一个增量。例如,我有一个函数“thumbsUp”,它返回
在每次单击时返回此.forms.form[1]。thumbsUp++
,但我希望它自动针对每个条目。 论坛提交:

    <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>

从“../firebase”导入{formRef}//导入对存储在firebase中的表单对象的引用
导出默认值{
数据(){
返回{
提交:假,
表格:{
名称:“”,
声明:'',
审查:'',
拇指支持:0
},
姓名:'嘿',
}
},
方法:{
//使用formRef将this.form对象作为{form}推送到firebase
submitForm(){
formRef.push({form:this.form,edit:false})
this.submitted=true
}
}
}
论坛评论页面:

<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
}

},

}

{{review.name}
{{review.form.name},来自{{review.form.state}的作者说:
{{review.form.review}

撤职 竖起大拇指:{{review.form.thumbsUp} 竖起大拇指! 从“../firebase”导入{formRef} 导出默认值{ 数据(){ 返回{ } }, 火基:{ forms:formRef//将表单引用存储在“表单”中 }, 方法:{ //从formRef的子级获取密钥以删除post removePost(键){ formRef.child(键).remove() }, 拇指{ 返回此.forms.form[1]。thumbsUp++//需要修复 } }, }
在按钮单击功能上,传递循环通过的表单元素。在您的情况下,
thumbsUp(review.form)

然后在拇指支撑功能中

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