Unable to call a function on click of button in Vue js using vuetify

Question

I am using Vue 2

I am displaying a table using datatable using Vuetify.

For each row I need to show a button on click of which a function will get called.

I tried @click and v-on:click both of which did not work. It complains about syntax error on this line. Can someone please guide me how to do it ?

The error is in map function in detail key:

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
            }));

My code is :

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

have you tried with a simple alert("test") if the click is working — mahatmanich
– mahatmanich, Commented Dec 11, 2019 at 13:24
look at the answer below, detail should return a string, no? What does detail return now? What is the actual error output? — mahatmanich
– mahatmanich, Commented Dec 11, 2019 at 13:42

Lars Rijnen · Accepted Answer · 2019-12-11 13:24:07Z

1

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
        }));

try to add '' for your html

answered Dec 11, 2019 at 13:24

Lars Rijnen

3631 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D555 Over a year ago

Using " only print everything as text and getting parsed not as html

Collectives™ on Stack Overflow

Unable to call a function on click of button in Vue js using vuetify

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related