Получение текущего идентификатора в таблице квазаров

Question

Доброе утро,

Я пытаюсь сделать и отредактировать функцию в таблице Quasar. Он работает, как и ожидалось, но когда у меня есть более одной записи в таблице, по умолчанию используется последняя запись.

Значение строки добавляется в компонент с помощью реквизита, моя проблема заключается в получении текущей строки. Итак, мой вопрос: как получить правильную строку при нажатии кнопки?

Скачать код

Answer 1

Вы можете получить данные строки, используя props.row.

Пример -

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

Теперь у вас есть строка и indexof конкретная строка. Вы можете использовать splice или заменить элемент по определенному индексу.

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

Проверить консоль.