Vue, edit item in the table and redirect to another page

Question

Good Morning!

I have a page that lists the devices and I want to click on the item to be redirected to another page that lists the features, until this point is working. However, when doing this, some features on the devices list page are not working. For example, edit the name.

enter image description here

Follow the image for a better understanding of what I want to do.

Thanks

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

In v-data-table ..., I want to use something like @click: row = "featureDevice", when clicking on the line redirect to another page (This happens when I click on the line). When I put @click: row = "featureDevice", the name edit function and actions are "disabled", because @click is overriding any action on the line.

I want to keep the action of editing name and actions.

Answer 1

You can use click event by column.

See the below example:

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

If you click in the column Name, none event is dispatch. But if you click in the column Id the page is redirected.