为什么不能从 v-data-table 调用函数？答案

【问题标题】：Why can't a function be called from v-data-table?为什么不能从 v-data-table 调用函数？
【发布时间】：2021-04-23 20:30:45
【问题描述】：

我想调用 getName() 来更改表值。但是没有调用该函数。
好像只是直接从headers中取值而已。
如何通过调用 getName() 来更改值？

<v-data-table :headers="headers" :items="studies" :search="search" @click:row="detail">
        <template slot="items" slot-scope="props">
          <td>{{ props.item.title }}</td>
          <td>{{ getName(props.item.user) }}</td>
          <td>{{ props.item.createdAt }}</td>
        </template>
</v-data-table>

headers: [
      {
        text: 'Title',
        value: 'title',
        sortable: true
      },
      {
        text: 'Name',
        value: 'user',
        sortable: false
      },
      {
        text: 'Created',
        value: 'createdAt',
        sortable: false
      }
    ]

getName(val) {
      this.$axios.get("http://localhost:3000/users/" + val).then(res => {
           this.name = res.data.name;
         });
      console.log(this.name);
      return this.name;
    },

【问题讨论】：

你的 vuetify 是什么版本
@BoussadjraBrahim vuetify 版本是 2.4.0

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

在 vuetify 的文档中明确指出，当通过像 item 或 body 这样的槽定义表行时，不会发出 click:row，就像您在上面的代码中所做的那样。检查下面的链接并浏览可用于 Vuetify 数据表的事件。

Link to Documentation

相反，您可以像这样呈现您的表格，然后如果您需要向任何值添加任何自定义方法或操作。

<v-data-table :headers="headers" :items="studies" :search="search" @click:row="detail">

  <template v-slot:item.title="{ item }">
    <v-chip>{{ item.title }}</v-chip>
  </template>

</v-data-table>

确保道具采用这种格式

[
  {title: "Java 101", user:"anon_User", createdAt:"new Date()"},
  {title: "Vue3", user:"root_user", createdAt:"new Date(7)"},
]

【讨论】：