模板vuejs中@click事件的基本异步调用

Question

我想设置一个vue.js组件的数据与按钮模板和@单击事件。此事件调用一个方法组件，该组件调用带有promise的异步函数。

当我单击我的按钮时，段落标记html的结果正确显示，但同时它在我的检查器浏览器中生成了一个错误，如下所示：

vue.runtime.esm.js:620[vue warn]：v-on处理程序中的错误：“TypeError:foo.then（…）.bind不是函数”
在
---

很奇怪，为什么会抛出错误，同时做这项工作。。。。

我现在把上下文复制到另一个变量中，并调用这个变量来更改数据组件，但它似乎不建议由esLint过程分析文件。它存在一个特定的规则。

如何工作的基本异步promise更改数据与点击按钮模板上的vuejs？

这是我的组件文件：

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

Answer 1

删除bind'箭头函数已经完成了绑定。

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

供参考

你以前可以这么做的

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

Answer 2

由于您使用的是箭头函数，因此无需添加bind（this）：

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

或者

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