Javascript 无法使用vuetify在Vue js中单击按钮调用函数

我正在使用VUE2

我正在使用Vuetify使用datatable显示一个表

对于每一行，我需要显示一个按钮，单击该按钮将调用一个函数

我尝试了@click和v-on:click，但这两种方法都不起作用。它抱怨这一行的语法错误。 有人能指导我怎么做吗

错误出现在详细信息键中的映射函数中：

我的代码是：

<template>
    <div>
        <v-data-table
            :headers="headers"
            :items="calls"
            :hide-default-footer="true"
            class="elevation-1"
        ></v-data-table>

        <v-pagination v-if="this.pagination.total > 0"
            v-model="pagination.current"
            :length="pagination.total"
            :total-visible=10
            @input="onPageChange"
        ></v-pagination>

    </div>

</template>

<script>
import moment from 'moment';
import callAPI from '@/api/CallAPI';
import { CALL_STATUS } from '../../constants/enum';

export default {
  name: 'listing',
  props: ['dates', 'status'],
  mounted() {
    this.loadCalls();
  },
  watch: {
    dates() {
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.offset = 0;
      this.loadCalls();
    },
    status() {
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.offset = 0;
      this.loadCalls();
    },
  },
  data() {
    return {
      headers: [
        {
          text: 'Call Id',
          align: 'left',
          sortable: false,
          value: 'id',
        },
        { text: 'Booking Time', sortable: false, value: 'createAt' },
        { text: 'Confirmed Time', sortable: false, value: 'startTime' },
        { text: 'User name', sortable: false, value: 'username' },
        { text: 'Expert name', sortable: false, value: 'expertName' },
        { text: 'Status', sortable: false, value: 'status' },
        { text: 'Detail', sortable: false, value: 'detail' },
      ],
      search: '',
      pagination: {
        current: 1,
        total: 0,
        perPage: 20,
        offset: 0,
      },
      resizable: true,
      adaptive: true,
      draggable: true,  
      calls: [],
    };
  },
  methods: {
    show () {
      this.$modal.show('example-modal')
    },
    hide () {
      this.$modal.hide('example-modal')
    },
    async loadCalls() {
      const date1 = moment(`${this.dates[0]} 00:00:00`).format('x');
      const date2 = moment(`${this.dates[1]} 23:59:59`).format('x');
      console.log(`${this.dates[0]} 00:00:00`, date1, `${this.dates[1]} 23:59:59`, date2);

      const calls = await callAPI.getListing(
        {
          startTime: date1,
          endTime: date2,
          status: this.status,
          limit: this.pagination.perPage,
          offset: this.pagination.offset,
        },
      );
      this.calls = calls.data.result.calls
        .map((obj, i) => ({
          id: obj.id,
          createAt: moment.parseZone(obj.created_at).format('YYYY-MM-DD hh:mm a'),
          startTime: (obj.start_time) ? moment.parseZone(obj.start_time).format('YYYY-MM-DD hh:mm a') : '',
          username: obj.User.username.toUpperCase(),
          expertName: obj.Expert.expertName.toUpperCase(),
          status: CALL_STATUS[obj.status],
          detail: (obj.status !== 'complete' && obj.status !== 'cancel') ? <v-btn v-on:click="callSomeFunction(id)">Change Status</v-btn>:'',  // Error is on this line
        }));

      if (this.calls.length > 0) {
        this.pagination.current = calls.data.result.currentPage;
      }
      this.pagination.total = calls.data.result.totalPage;
      console.log(this.calls);
    },
    onPageChange(number) {
      this.pagination.offset = (number > 1) ? ((number * this.pagination.perPage) - this.pagination.perPage) : 0;
      this.loadCalls();
    },
  },
};
</script>

---

尝试为您的html添加

您是否尝试过使用简单的alerttest如果单击有效是它不起作用查看下面的答案，详细信息应返回字符串，否？细节现在返回什么？实际的错误输出是什么？只使用文本打印所有内容，而不使用html进行解析

<template>
    <div>
        <v-data-table
            :headers="headers"
            :items="calls"
            :hide-default-footer="true"
            class="elevation-1"
        ></v-data-table>

        <v-pagination v-if="this.pagination.total > 0"
            v-model="pagination.current"
            :length="pagination.total"
            :total-visible=10
            @input="onPageChange"
        ></v-pagination>

    </div>

</template>

<script>
import moment from 'moment';
import callAPI from '@/api/CallAPI';
import { CALL_STATUS } from '../../constants/enum';

export default {
  name: 'listing',
  props: ['dates', 'status'],
  mounted() {
    this.loadCalls();
  },
  watch: {
    dates() {
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.offset = 0;
      this.loadCalls();
    },
    status() {
      this.pagination.current = 1;
      this.pagination.total = 0;
      this.pagination.offset = 0;
      this.loadCalls();
    },
  },
  data() {
    return {
      headers: [
        {
          text: 'Call Id',
          align: 'left',
          sortable: false,
          value: 'id',
        },
        { text: 'Booking Time', sortable: false, value: 'createAt' },
        { text: 'Confirmed Time', sortable: false, value: 'startTime' },
        { text: 'User name', sortable: false, value: 'username' },
        { text: 'Expert name', sortable: false, value: 'expertName' },
        { text: 'Status', sortable: false, value: 'status' },
        { text: 'Detail', sortable: false, value: 'detail' },
      ],
      search: '',
      pagination: {
        current: 1,
        total: 0,
        perPage: 20,
        offset: 0,
      },
      resizable: true,
      adaptive: true,
      draggable: true,  
      calls: [],
    };
  },
  methods: {
    show () {
      this.$modal.show('example-modal')
    },
    hide () {
      this.$modal.hide('example-modal')
    },
    async loadCalls() {
      const date1 = moment(`${this.dates[0]} 00:00:00`).format('x');
      const date2 = moment(`${this.dates[1]} 23:59:59`).format('x');
      console.log(`${this.dates[0]} 00:00:00`, date1, `${this.dates[1]} 23:59:59`, date2);

      const calls = await callAPI.getListing(
        {
          startTime: date1,
          endTime: date2,
          status: this.status,
          limit: this.pagination.perPage,
          offset: this.pagination.offset,
        },
      );
      this.calls = calls.data.result.calls
        .map((obj, i) => ({
          id: obj.id,
          createAt: moment.parseZone(obj.created_at).format('YYYY-MM-DD hh:mm a'),
          startTime: (obj.start_time) ? moment.parseZone(obj.start_time).format('YYYY-MM-DD hh:mm a') : '',
          username: obj.User.username.toUpperCase(),
          expertName: obj.Expert.expertName.toUpperCase(),
          status: CALL_STATUS[obj.status],
          detail: (obj.status !== 'complete' && obj.status !== 'cancel') ? <v-btn v-on:click="callSomeFunction(id)">Change Status</v-btn>:'',  // Error is on this line
        }));

      if (this.calls.length > 0) {
        this.pagination.current = calls.data.result.currentPage;
      }
      this.pagination.total = calls.data.result.totalPage;
      console.log(this.calls);
    },
    onPageChange(number) {
      this.pagination.offset = (number > 1) ? ((number * this.pagination.perPage) - this.pagination.perPage) : 0;
      this.loadCalls();
    },
  },
};
</script>

this.calls = calls.data.result.calls
       .map((obj, i) => ({
          id: obj.id,
          createAt: moment.parseZone(obj.created_at).format('YYYY-MM-DD hh:mm a'),
          startTime: (obj.start_time) ? moment.parseZone(obj.start_time).format('YYYY-MM-DD hh:mm a') : '',
          username: obj.User.username.toUpperCase(),
          expertName: obj.Expert.expertName.toUpperCase(),
          status: CALL_STATUS[obj.status],
          detail: (obj.status !== 'complete' && obj.status !== 'cancel') ? '<v-btn v-on:click="callSomeFunction(id)">Change Status</v-btn>' :'',  // Error is on this line
        }));