函数 Query.where() 需要一个有效的第三个参数，但它是未定义的

Question

我正在尝试向我的 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>

我的问题在于.where("name", "==", **this.members.name**) 上的addHost 方法我已经尝试了所有我能想到的方法：this.member.name、members.name、member.name、doc.data().name 但我似乎不明白我应该在第三个参数上放什么。

谁能帮我解释一下？

Answer 1

members 是一个对象数组。你需要指出你引用的数组的哪个元素，比如this.members[0].name或this.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()
        //....