Vue，编辑表格中的项目并重定向到另一个页面答案

【问题标题】：Vue, edit item in the table and redirect to another pageVue，编辑表格中的项目并重定向到另一个页面
【发布时间】：2020-06-10 15:00:21
【问题描述】：

早安！

我有一个列出设备的页面，我想单击该项目以重定向到另一个列出功能的页面，直到此时有效。但是，执行此操作时，设备列表页面上的某些功能无法正常工作。例如，编辑名称。

enter image description here

按照图片更好地了解我想要做什么。

谢谢

<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 覆盖了行上的任何操作。

我想保留编辑名称和动作的动作。

【问题讨论】：

你能把代码的javascript部分贴出来，方法featureDevice是在哪里定义的？
methods: { featureDevice(value){ this.$router.push('/devices/'+value.uid) }, 是其他页面。

标签： vue.js vuetify.js vue-tables-2

【解决方案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>

如果单击列名称，则不会调度任何事件。但是，如果您单击 Id 列，页面将被重定向。

【讨论】：