Vue, редактировать элемент в таблице и перенаправлять на другую страницу

Question

Доброе утро!

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

введите описание изображения здесь

Следуйте изображению для лучшего понимания того, что я хочу сделать.

Спасибо

<v-data-table :headers="headers" :items="devices" item-key="uid" disable-pagination hide-default-footer>

        <template v-slot:item.online="{ item }">
            <v-icon color="success" v-if="item.online">check_circle</v-icon>
            <v-tooltip bottom v-else>
                <template #activator="{ on }">
                    <v-icon v-on="on">check_circle</v-icon>
                </template>
                <span>last seen {{ item.last_seen | moment("from", "now") }}</span>
            </v-tooltip>
        </template>

       <template v-slot:item.uid="{ item }">
            <v-chip>
                {{ item.uid }}
                <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
            </v-chip>
        </template>

        <template v-slot:item.name="{ item }">
            <v-edit-dialog :return-value="editName" large @open="editName = item.name" @save="save(item)">
                <v-text-field slot="input" v-model="editName" label="Edit" single-line>
                </v-text-field>
                <v-icon small left>mdi-file-edit</v-icon>
                {{ item.name }}
            </v-edit-dialog>
        </template>

В v-data-table ... я хочу использовать что-то вроде @click: row = "featureDevice", при нажатии на строку перенаправить на другую страницу (это происходит, когда я нажимаю на линия). Когда я помещаю @click: row = "featureDevice", функция редактирования имени и действия отключаются, потому что @click отменяет любое действие в строке.

Я хочу сохранить действие редактирования имени и действия.

Answer 1

Вы можете использовать click событие по столбцу.

См. Приведенный ниже пример:

<template>
  <v-app>
    <v-content class="pa-3">
      <v-data-table :headers="headers" :items="items">
        <template v-slot:item.id="{ item }">
          <div style="cursor: pointer" @click.stop="pushOtherPage">{{ item.id }}</div>
        </template>
      </v-data-table>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' },
    ],
    headers: [
      { text: 'Id', value: 'id' },
      { text: 'Name', value: 'name' },
    ],
  }),
  methods: {
    pushOtherPage() {
      console.log('click in Id column');
      this.$router.push({ name: 'other-page' });
    },
  },
};
</script>

Если щелкнуть имя столбца, ни одно событие не будет отправлено. Но если щелкнуть идентификатор столбца, страница перенаправляется.