Function Query.where() requires a valid third argument, but it was undefined

Question

I'm trying to add a method to my vue.js website that will increment a value on a firestore database use the FieldValue.increment but I'm having a hard time trying to use the where clause so I can match the username on the page with the name on the DB. This is how the page looks like and the method I'm trying to add is going to work when I click the "+" sign. If I click the one on scout it'll add 1 value to scout and one to total to that persons value. The same will also happen with the other values. Here is the image of the page

this is the code I have so far

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

My problem is on the addHost method on the .where("name", "==", **this.members.name**) I already tried everything that I could think of: this.member.name, members.name, member.name, doc.data().name but I don't seem to understand what should I put on the third argument.

Can anyone shed some light for me?

Answer 1

members is an array of objects. You need to indicate which element of the array you refer to, like this.members[0].name or this.members[1].name, etc.

You should use the optional second argument of v-for to get the index of the current item and call the addHost() with this index value, as follows:

<tr v-for="(member, index) in members" :key="member.id">
          //.....
          <td>
            {{member.host}}
            <i class="fas fa-plus" @click="addHost(index)"></i>
          </td>

Then you change your method to:

addHost(index) {
      db.collection("members")
        .where("name", "==", this.members[index].name)
        .get()
        //....