CODEWITHSUNDEEP
vue.jsquasar
Thomas Petersen
Thomas Petersen

Reputation: 29

Getting Current ID on Quasar Table

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?

Table View

enter image description here

Code Download

Upvotes: 1

Views: 4025

Answers (2)

balan kugan
balan kugan

Reputation: 109

**you can use index to get the row number

      <tr v-for="(strockorder,index) in strockorders" :key="index">
      <td class="text-left">{{ strockorder.strockNo}}</td>
      <td class="text-center">{{ strockorder.item}}</td>
      <td class="text-center">{{ strockorder.orderDate}} </td>
      <td class="text-center">{{strockorder.deliveryDate }}</td>

**

Upvotes: 0

Pratik Patel
Pratik Patel

Reputation: 6978

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.

Upvotes: 2

Related Questions