basic async call on @click event in template vuejs

Question

I would like to set data of a vue.js component with a button template and @click event. This event call a method component which call a async function with promise.

When I click on my button the result of paragraph tag html appear correctly but in a same time it generated a error into my inspector browser electron like this :

vue.runtime.esm.js:620 [Vue warn]: Error in v-on handler: "TypeError: foo.then(...).bind is not a function"
found in
---> at src/views/TestDb.vue
at src/App.vue

Very strange to understand why throw error and in same time do the job....

I now the trick of copy the context this into another variable and call this variable for change data component but it seems to be not advise by esLint process analyse file. It exist a specific rule just for that.

How can work of basic async promise for change data with a click button template on vuejs ?

This is my component file :

<template>

    <div id="testDb">
        <Menu />
        <h2>Test DB operation</h2>
        <b-button @click="createOperation">create Operation</b-button>
        <p style="background-color: white">{{ returnValue1 }}</p>
    </div>

</template>

<script>

import Menu              from "@/components/Menu";
import ConnectionManager from '../service/ConnectionManager'

export default
{
    name: "TestDb",
    components:
    {
        Menu
    },
    data: function()
    {
        return {
            alert: null,
            returnValue1: "beer"
        }
    },
    methods:
    {
        createOperation: function ()
        {
            const connectionManager = new ConnectionManager()
            let foo = connectionManager.insert('operation')
            foo.then(() => {
                this.returnValue1 = "bar"
            }).bind(this)
        },
    }
}

</script>

<style lang="scss" scoped>

    @import './src/assets/scss/main';

</style>

Boussadjra Brahim · Accepted Answer · 2020-11-17 20:58:16Z

3

Since you're using an arrow function there's no need to add bind(this) :

 foo.then(() => {
                this.returnValue1 = "bar"
            })

or

 foo.then(function(){
                this.returnValue1 = "bar"
            }.bind(this))

answered Nov 17, 2020 at 20:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

miltone Over a year ago

OK i search many others thing but not about arrow function. Thank you for your very speed response. I confirm that's work well. Perhaps this little issue help others.

Wakeel · Accepted Answer · 2020-11-17 21:03:09Z

1

Remove the bind ' the arrow function already did the binding.

foo.then(() => {
                this.returnValue1 = "bar"
            })

FYI

You could have done this before

foo.then(() => {
                this.returnValue1 = "bar"
            }.bind(this))

answered Nov 17, 2020 at 21:03

Wakeel

5,2602 gold badges16 silver badges14 bronze badges

Collectives™ on Stack Overflow

basic async call on @click event in template vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related