I would like to set data of a vue.js ponent with a button template and @click event. This event call a method ponent 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 ponent 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 ponent 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 "@/ponents/Menu";
import ConnectionManager from '../service/ConnectionManager'

export default
{
    name: "TestDb",
    ponents:
    {
        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>

I would like to set data of a vue.js ponent with a button template and @click event. This event call a method ponent 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 ponent 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 ponent 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 "@/ponents/Menu";
import ConnectionManager from '../service/ConnectionManager'

export default
{
    name: "TestDb",
    ponents:
    {
        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>

• javascript
• vue.js

2 Answers 2

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

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