javascript - 函数 Query.where() 需要一个有效的第三个参数,但它是未定义的
问题描述
我正在尝试向我的 vue.js 网站添加一个方法,该方法将使用 FieldValue.increment 在 firestore 数据库上增加一个值,但我很难尝试使用 where 子句,因此我可以匹配用户名带有数据库名称的页面。这就是页面的外观,当我单击“+”号时,我尝试添加的方法将起作用。如果我单击侦察员上的那个,它将为侦察员添加 1 个值,并为该人的值添加 1 个总计。其他值也会发生同样的情况。这是页面的图像
这是我到目前为止的代码
<template>
<div>
<h3>Member List</h3>
<table class="striped centered">
<thead>
<tr>
<th>Name</th>
<th>Rank</th>
<th>Alt</th>
<th>Scout</th>
<th>Anti</th>
<th>Host</th>
<th>Total</th>
<th>Comments</th>
<th>-</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id">
<td>
<router-link :to="{ name: 'member', params: { name: member.name }}">{{member.name}}</router-link>
</td>
<td>{{member.rank}}</td>
<td>{{member.alt}}</td>
<td>
{{member.scout}}
<i class="fas fa-plus"></i>
</td>
<td>
{{member.anti}}
<i class="fas fa-plus"></i>
</td>
<td>
{{member.host}}
<i class="fas fa-plus" @click="addHost()"></i>
</td>
<td>{{member.total}}</td>
<td>{{member.comments}}</td>
<td>
<router-link
v-if="member.name"
:to="{path: '/', name: 'edit', params: {name: member.name}}"
>
<i class="fas fa-edit"></i>
</router-link>
<i class="fas fa-trash"></i>
</td>
</tr>
</tbody>
</table>
<!-- <div class="fixed-action-btn">
<router-link to="/add" class="btn-floating btn-large red">
<i class="fa fa-plus"></i>
</i>
</div>-->
</div>
</template>
<script>
import { db, fv } from "../data/firebaseInit";
export default {
name: "memberlist",
data() {
return {
members: []
};
},
methods: {
addHost() {
db.collection("members")
.where("name", "==", this.members.name)
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
doc.ref.update({
host: fv.increment(1),
total: fv.increment(1)
});
});
});
}
},
created() {
db.collection("members")
.orderBy("name")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
// console.log(doc.data());
const data = {
id: doc.id,
name: doc.data().name,
rank: doc.data().rank,
alt: doc.data().alt,
scout: doc.data().scout,
anti: doc.data().anti,
host: doc.data().host,
total: doc.data().total,
comments: doc.data().comments
};
this.members.push(data);
});
});
}
};
</script>
<style>
</style>
我的问题在于我已经尝试了所有我能想到的方法:addHost
, , ,但我似乎不明白我应该在第三个参数上放什么。.where("name", "==", **this.members.name**)
this.member.name
members.name
member.name
doc.data().name
任何人都可以为我解释一下吗?
解决方案
members
是一个对象数组。您需要指出您引用的数组的哪个元素,例如this.members[0].name
orthis.members[1].name
等。
您应该使用可选的第二个参数v-for
来获取当前项目的索引并addHost()
使用此索引值调用 ,如下所示:
<tr v-for="(member, index) in members" :key="member.id">
//.....
<td>
{{member.host}}
<i class="fas fa-plus" @click="addHost(index)"></i>
</td>
然后您将方法更改为:
addHost(index) {
db.collection("members")
.where("name", "==", this.members[index].name)
.get()
//....