Getting Current ID on Quasar Table

Question

Good Morning,

I am trying to do and edit feature in a Quasar table. It works as expected, but when I have more than one entry in the table it defaults to the last entry.

The value of the row is added to the component using props, my problem is getting the current row. So my question is how do it get the correct row when clicking the button?

Code Download

Answer 1

You can get row data using props.row.

Example -

<q-table
          title="Treats"
          :data="data"
          :columns="columns"
          row-key="name"
        >
          <template v-slot:body-cell-name="props">
            <q-td :props="props">
              <div>
                <q-badge color="purple" :label="props.value"></q-badge>
                <q-btn icon="edit" dense flat size="sm" @click="EditData(props.row)"></q-btn>
              </div>

            </q-td>
          </template>
        </q-table>


  methods:{
    EditData(row){
      alert("hi")
      console.log(row);
      console.log(this.data.indexOf(row))
    }
  }

Now you have a row and indexof particular row. You can use splice or replace the element on particular index.

Codepen - https://codepen.io/Pratik__007/pen/LYVjqXb

Check the console.