如何在vuejs中获取表中特定行的值？

Question

如何在 VueJS 2 中获取表中特定行的值？ 这是我现在的桌子

下面是我的代码，用于生成一个表格和两个将显示模态的按钮； 一个是编辑细节，另一个是显示来自数据库的二维码。 我想获取循环的最后一个值并将其放入SHOW QR Button并且 Show QR Button 将包含循环中的最后一个值。

<div class="myTable table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Member ID</th>
        <th>First Name</th>
        <th>Middle Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>Actions</th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="result in filteredList" :key="result.id">
        <td>{{result.Memb_ID}}</td>
        <th>{{result.First_Name}}</th>
        <th>{{result.Middle_Name}}</th>
        <th>{{result.Last_Name}}</th>
        <th>{{result.Address}}</th>

        <div class="row justify-content-center">
          <b-button v-b-modal.showDetails size="lg" class="showDetails" variant="danger">Edit</b-button>
          <b-button v-b-modal.modalQR size="lg" class="showQR" variant="success">Show QR</b-button>
        </div>
      </tr>
    </tbody>
  </table>
</div>

这是我的模式，我希望为每个要插入的用户插入不同的 QR。 下面是我的Show QR Button 模式

<b-modal id="modalQR" title="Generated Details">
    <div class="showQR text-center">
      <qrcode-vue :value="results.url" :size="size" level="H"></qrcode-vue>
    </div>
  </b-modal>

下面是我的脚本

 <script>
import QrcodeVue from "qrcode.vue";
import axios from "axios";

export default {
  data() {
    return {
      search: "",
      results: {},
      value: "",
      size: 200,
      selected: [],

    };
  },
  computed: {
    filteredList() {
      return this.results.filter(post =>
        post.First_Name.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  },
  methods: {

    getUsers() {
      axios
        .get("localhost:9000/user/")
        .then(response => (this.results = response.data))
        .catch(error => console.log(error.message));
    }
  },
  components: {
    QrcodeVue
  },
  mounted() {
    this.getUsers();
  }
};
</script>

Answer 1

v-for还为您提供了您所在项目的索引：

<tr v-for="(result, index) in filteredList" :key="result.id">

然后您可以使用index === filteredList.length

Answer 2

你可以试试这个：

<tr v-for="result in filteredList.data" :key="result.id">
        <td>{{result.Memb_ID}}</td>