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

Question

我正在尝试向我的 vue.js 网站添加一个方法，该方法将使用 FieldValue.increment 在 firestore 数据库上增加一个值，但我很难尝试使用 where 子句，以便我可以匹配页面上的用户名与数据库上的名称。这就是页面的样子，当我单击“+”号时，我尝试添加的方法将起作用。如果我点击侦察兵上的那个，它会为侦察兵增加 1 个值，并为该人员的总值(value)增加 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()
        //....