Pilih baris dalam q-table melalui butang menggunakan Vue.js

Question

Apabila saya menekan butang edit dalam butang tindakan dalam q-table Walau bagaimanapun, kerana kotak pilihan dalam q-table tidak boleh dipilih, saya mendapat ralat apabila saya ingin mengemas kini skema. Apa yang saya mahu ialah apabila saya mengklik butang tindakan, jadual mengesan bahawa saya telah memilih baris.

Jadual saya:

<template>
    <q-jadual
        title="Pelajar"
        :penapis="penapis"
        :rows="studentsData"
        :columns="columns"
        row-key="id"
        padat
        selection="single"
        class="meja pelajar q-pa-lg bulat-bulat-bayang-bayang"
        v-model:selected="selectedStudentRow"
    >
      <template v-slot:body-cell-actions="props">
        <q-td :props="props">
          <q-btn class="action-btn" color="hijau"ikon="mdi-pen"
        </q-td>
      </template>
    </q-table>
    <q-dialog v-model="addStudentNoteDialog"class="tambah-dialog-nota-pelajar">
      <q-kad>
        <q-kad-bahagian>
          <q-form>
            <q-input v-model="nota" label="Nota"
            <q-card-actions align="kanan">
              <q-btn label="Batal"warna="utama"
                     @click="cancelNote">
              </q-btn>
              <q-btn label="Tambah Nota"warna="utama"
                     @click="addStudentNote(selectedStudentRow)">
              </q-btn>
            </q-card-actions>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </template>

<skrip>
eksport lalai {
  nama: "Students Table",
  data(){
    kembali{
      openStudentDialog: palsu,
    }
  }
  dikira: {
    selectedStudentRow: {
      dapatkan() {
        kembalikan ini.$store.getters.selectedStudentRow;
      },
      set(val) {
        this.$store.commit('selectedStudentRow', val);
      }
    }
  },
</script>

Apabila butang yang saya mahu diklik, modal dibuka dan kotak semak ditandakan dalam jadual.Apa yang saya mahu tunjukkan dalam imej ini

Saya cuba menghantar prop.row pada acara klik butang. Tetapi ia tidak berfungsi.

Answer 1

<q-input v-model="note" label="Note" outlined></q-input>

Di manakah anda "log" data?

Jika saya faham dengan betul, saya akan mencipta sesuatu seperti ini:

<template>
    <q-table
        title="Students"
        :filter="filter"
        :rows="studentsData"
        :columns="columns"
        row-key="id"
        dense
        selection="single"
        class="puffy-shadow rounded q-pa-lg students-table"
        v-model:selected="selectedStudentRow"
    >

<template v-slot:body-cell-actions="props">
        <q-td :props="props">
          <q-btn class="action-btn" color="green" icon="mdi-pen" @click="openStudentDialog(props.row)">
        </q-td>
      </template>
</q-table>

<q-card>
        <q-card-section>
          <q-form>
            <q-input v-model="selectedStudent.note" label="Note" outlined></q-input>

        </q-card-section>

</q-card>


[......]
data(){
    return{
      studentDialog: false,
      selectedStudent: {}
    }
  }, 

methods: {
openStudentDialog(student){
    selectedStudent = student
    studentDialog = true
}

Perkara yang serupa