Whenever I click the edit button located in the action buttons within the q-table, a modal window pops up. However, I encounter an error when attempting to update the modal because the checkbox within the q-table is not selectable. What I am aiming for is for the table to automatically detect the selected row when the action button is clicked.
Below is my table structure:
<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 = true;">
</q-td>
</template>
</q-table>
<q-dialog v-model="addStudentNoteDialog" class="add-student-note-dialog">
<q-card>
<q-card-section>
<q-form>
<q-input v-model="note" label="Note" outlined></q-input>
<q-card-actions align="right">
<q-btn label="Cancel" color="primary"
@click="cancelNote">
</q-btn>
<q-btn label="Add Note" color="primary"
@click="addStudentNote(selectedStudentRow)">
</q-btn>
</q-card-actions>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: "StudentsTable",
data(){
return{
openStudentDialog: false,
}
}
computed: {
selectedStudentRow: {
get() {
return this.$store.getters.selectedStudentRow;
},
set(val) {
this.$store.commit('selectedStudentRow', val);
}
}
},
</script>
Upon clicking the desired button, the modal should open with the checkbox pre-selected within the table. You can view the desired behavior in this image
I attempted using the send prop.row in the button click event, but it did not work as expected.