Как получить значение определенной строки в таблице в vuejs? - PullRequest
1 голос
/ 24 июня 2019

Как я могу получить значение определенной строки в таблице в VueJS 2? Это мой столик прямо сейчас now

Ниже приведен мой код для генерации таблицы и двух кнопок, которые будут отображать модалы; один - редактировать детали, а другой - отображать QR-код, поступающий из базы данных. Я хочу получить последнее значение цикла и поместить его в ПОКАЗАТЬ кнопку QR , а кнопка Показать QR будет содержать последнее значение из цикла.

<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 для каждого пользователя, который будет вставлен. here Ниже мой модал для Показать QR кнопку

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

и ниже мой сценарий here is m

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

1 Ответ

0 голосов
/ 24 июня 2019

v-for также дает индекс предмета, на котором вы находитесь:

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

Тогда вы можете просто использовать index === filteredList.length

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...