@april said in Editable cell Data Table examples?:
<template slot=“col-message” slot-scope=“cell”>
<q-input :value=“cell.data” :data-id=“cell.row.unique_id” @change.native=“updateMessage”>
</q-input>
</template>
Pretty close! Here’s how I would improve performance:
<template slot="col-message" slot-scope="cell">
<q-input :value="cell.data" @change.native="updateMessage($event, cell.row.__index)"></q-input>
<!-- $event is Vue's magic accessor for native events -->
<!-- Quasar tracks your row index by assigning a __index property -->
</template>
Then change your method like this
// -- methods:
updateMessage (event, rowIndex) {
const newMessage = event.target.value
this.$set(this.table[rowIndex], 'message', newMessage)
}