Question

我正在尝试向我的vue.js网站添加一种方法，该方法将使用FieldValue.increment在Firestore数据库上增加一个值，但是我在尝试使用where子句时遇到了困难，因此我可以匹配页面上的用户名以及数据库上的名称。这是页面的外观，当我单击“ +”号时，我尝试添加的方法将起作用。如果我在侦察兵上单击一个，它将在侦察兵上添加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，{ {1}}，但我似乎不明白我应该在第三个论点上加上什么。

有人可以帮我找个亮点吗？

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()
        //....

函数Query.where（）需要一个有效的第三个参数，但未定义

1 个答案: