Bdtjtk

I am having an issue with triggering a method in the vue component. I am using Element UI with Vuex, and would like to trigger a state change (make another component visible) when a shortcut in the datetimepicker element is clicked. Here's the component code:

<template>

    <div id="DateTimePicker">

        <div/>

        TimeInterval state: {{this.$store.getters.timeInterval}}

        <div/>

        <el-date-picker

            :value="this.timeInterval"

            @input="this.setTimeInterval"

            type="datetimerange"

            :picker-options="dateTimeShortcuts"

            range-separator="To"

            format="yyyy-MM-dd HH:mm"

            editable

            time-arrow-control

            start-placeholder="Start date"

            end-placeholder="End date"

            align="right"

            size="large">

        </el-date-picker>

    </div>

</template>



<script>

import { mapGetters, mapActions } from 'vuex'



export default {

    name: 'DateTimePicker',

    computed: {

        ...mapGetters(['timeInterval']),

    },

    methods: {

        ...mapActions(['setTimeInterval', 'setRefreshRateVisibility']),

    },

    data() {

        return {

            dateTimeShortcuts: {

                disabledDate(date) {

                    return date > new Date() || date < new Date('12/1/18');

                },

                shortcuts: [

                    {

                        text: '15 Minutes',

                        onClick(picker) {

                            this.setRefreshRateVisibility(true); // Vue does not recognize this as a function

                            const end = new Date();

                            const start = new Date();

                            start.setTime(start.getTime() - 900 * 1000);

                            picker.$emit('pick', [start, end]);

                        },

                    },

                ],

            },

        };

    },

};

</script>

When I click on the shortcut - I get an error:

Uncaught TypeError: this.setRefreshRateVisibility is not a function

When I do

<div id="DateTimePicker" @click="this.setRefreshRateVisibility(true)">

it works fine, so the problem is not with the action itself, but with how I invoke this action, I think. Here's the store file:

export default {

    state: {

        isRefreshRateVisible: false,

    },

    mutations: {

        SET_VISIBILITY(state, newValue) {

            state.isRefreshRateVisible = newValue;

        },

    },

    actions: {

        setRefreshRateVisibility: ({ commit }, newValue) => {

            commit('SET_VISIBILITY', newValue);

        },

    },

    getters: {

        isRefreshRateVisible: state => state.isRefreshRateVisible,

    },

};

Can anybody help me resole this, please?

You possibly seem to have a wrong reference to this. In JavaScript context, this refers to the immediate context, but Vue functions are tied to the context of the class/component.

To prevent this, copy the reference of this to another variable.

data(){

   let componentObj = this;

   ...

And then call the method using that reference.

onClick(picker) {

    componentObj.setRefreshRateVisibility(true);