将 routerlink 添加到 Vuetify 数据 table 行

Question

我有一个 v-data-table 从 API 获取数据。我想让这些行可点击，如果用户点击一行，它将打开另一条路线并显示该行的完整数据。如何使用 v-data-table 实现这一目标？

模板

<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        class="elevation-1"
>

数据

data() {
    return {
      visitors: []
    }
}

方法

async created() {
    try {
      const res = await axios.get(`http://localhost:3000/visitors`);
      this.visitors = res.data;
    } catch (e) {
      console.error(e);
    }
}

我不知道应该把路由器放在哪里 link？或者还有其他方法可以实现这一目标吗？谢谢。

Answer 1

在 v-data-table 您可以添加 @click:row="yourMethod"。这是一个例子：

<v-data-table
        :headers="headers"
        :items="visitors"
        :search="search"
        class="elevation-1"
        @click:row="openDetails"
>

然后是你的方法（只是一个例子）：

openDetails(val) {
  this.$router.push("details/"val.id)
}

将 routerlink 添加到 Vuetify 数据 table 行

Add routerlink to Vuetify data table row

vue.js

vuejs2

vuetify.js