Sélectionnez des lignes dans q-table via des boutons à l'aide de Vue.js

Question

Lorsque j'appuie sur le bouton d'édition dans le bouton d'action dans q-table, le bouton ouvre une fenêtre modale. Cependant, comme la case à cocher dans q-table n'est pas sélectionnable, j'obtiens une erreur lorsque je souhaite mettre à jour le schéma. Ce que je veux, c'est que lorsque je clique sur le bouton d'action, le tableau détecte que j'ai sélectionné la ligne.

Ma table :

<template>
    <q-table
        title="Étudiants"
        :filter="filtre"
        :rows="studentsData"
        :colonnes="colonnes"
        row-key="id"
        dense
        sélection="unique"
        class = "table d'étudiants q-pa-lg arrondie à ombre gonflée"
        v-model:selected="selectedStudentRow"
    >
      <modèle v-slot:body-cell-actions="props">
        <q-td :props="props">
          <q-btn class="action-btn" color="vert" icon="mdi-pen" @click="openStudentDialog = true;">
        </q-td>
      </modèle>
    </q-table>
    <q-dialog v-model="addStudentNoteDialog" class="add-student-note-dialog">
      <q-card>
        <section-carte-q>
          <forme-q>
            <q-input v-model="note" label="Note"
            <q-card-actions align="right">
              <q-btn label="Annuler" couleur="primaire"
                     @click="cancelNote">
              ≪/q-btn>
              <q-btn label="Ajouter une note" couleur="primaire"
                     @click="addStudentNote(selectedStudentRow)">
              ≪/q-btn>
            </q-card-actions>
          </forme-q>
        </q-card-section>
      </q-card>
    </q-dialogue>
  </modèle>

<script>
exporter par défaut {
  nom : "StudentsTable",
  données(){
    retourner{
      openStudentDialog : faux,
    }
  }
  calculé : {
    selectedStudentRow : {
      obtenir() {
        renvoie this.$store.getters.selectedStudentRow ;
      },
      ensemble(val) {
        this.$store.commit('selectedStudentRow', val);
      }
    }
  },
</script>

Lorsque vous cliquez sur le bouton souhaité, le modal s'ouvre et la case est cochée dans le tableau.Qu'est-ce que je veux montrer dans cette image

J'ai essayé d'envoyer prop.row lors d'un événement de clic sur un bouton. Mais ça ne marche pas.

Answer 1

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

Où « enregistrez-vous » les données ?

Si je comprends bien, je créerais quelque chose comme :

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

Choses similaires