Bagaimana untuk mendapatkan objek baris dalam bentuk dalam vue (dua kaedah)

Dalam Vue, kami menggunakan arahan v-for untuk menggelungkan senarai pemaparan. Apakah yang perlu kita lakukan jika kita perlu mendapatkan data baris yang dipilih dalam borang? Dalam artikel ini, saya akan memperkenalkan secara terperinci cara menggunakan arahan v-untuk Vue dan pengikatan peristiwa untuk mendapatkan objek baris dalam borang.

1. v-untuk arahan

Mari kita lihat dahulu penggunaan v-untuk arahan. Melalui arahan v-for, kita boleh menjadikan data ke dalam halaman dalam gelung untuk membentuk senarai. Sintaksnya adalah seperti berikut:

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

Dalam kod di atas, kami menggunakan arahan v-for untuk menggelungkan setiap elemen dalam tatasusunan senarai. Setiap elemen akan dipaparkan sebagai item dalam senarai, dengan item mewakili setiap elemen dalam tatasusunan, dan indeks mewakili indeks elemen dalam tatasusunan.

2. Dapatkan objek baris dalam bentuk

Dalam borang, kita selalunya perlu mendapatkan data baris yang dipilih. Untuk mencapai fungsi ini, kita boleh mendapatkan objek baris dalam bentuk melalui dua kaedah berikut.

1. Pengikatan peristiwa

Pengikatan peristiwa ialah kaedah biasa untuk mendapatkan objek baris dalam bentuk. Apabila pengguna mengklik baris tertentu dalam borang, peristiwa yang sepadan akan dicetuskan Kami boleh menangkap dan memproses acara melalui pengikatan peristiwa.

Sebagai contoh, kita boleh mengikat acara klik pada setiap baris dalam jadual Apabila pengguna mengklik pada baris, acara itu akan dicetuskan. Kodnya adalah seperti berikut:

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index" @click="handleClick(index)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleClick(index) {
      console.log(this.list[index])
    }
  }
}
</script>

Dalam kod di atas, kami mengikat acara klik dalam arahan v-untuk Apabila pengguna mengklik pada baris, kaedah handleClick akan dicetuskan. Dalam kaedah ini, kita boleh mendapatkan objek baris berdasarkan indeks baris yang diklik dan melakukan operasi yang sepadan. Contohnya, dalam kod di atas, kami mengeluarkan kandungan objek baris yang dipilih melalui console.log.

2. Dapatkan objek baris yang dipilih

Selain mengikat acara, Vue juga menyediakan kaedah terbina dalam untuk mendapatkan objek baris yang dipilih. Kita boleh mengikat atribut ref pada setiap baris dan kemudian mendapatkan objek baris yang dipilih melalui atribut ini.

Sebagai contoh, kita boleh mengikat atribut ref pada baris tertentu seperti berikut:

<tr v-for="(item, index) in list" :key="index" ref="row">
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td>{{ item.gender }}</td>
</tr>

Dalam kod di atas, kami menyimpan rujukan setiap baris kepada tatasusunan melalui arahan ref tengah. Seterusnya, apabila kita perlu mendapatkan objek baris yang dipilih, kita boleh mendapatkan objek baris yang sepadan dengan mendapatkan indeks baris yang dipilih dalam tatasusunan.

Sebagai contoh, kita boleh mendapatkan objek baris yang dipilih dalam acara klik butang, seperti yang ditunjukkan di bawah:

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index" ref="row">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="handleClick">获取选中行的内容</button>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleClick() {
      const selectedRowIndex = 1 // 假设我们选中了第2行
      const selectedRow = this.$refs.row[selectedRowIndex]
      console.log(selectedRow)
    }
  }
}
</script>

Dalam kod di atas, kita mendapat objek baris yang dipilih dalam klik butang acara Objek baris yang dipilih dan keluarkannya ke konsol.

Ringkasan:

Kedua-dua kaedah di atas boleh membantu kita mendapatkan objek baris dalam bentuk Pemilihan kaedah khusus hendaklah berdasarkan situasi yang berbeza. Perlu diingat bahawa apabila memberikan borang melalui gelung arahan v-untuk, setiap baris harus mempunyai nilai kunci unik sebagai nilai atribut kunci untuk meningkatkan prestasi dan mengelakkan masalah.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan objek baris dalam bentuk dalam vue (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!