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

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

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

vue.runtime.esm.js:620[vue warn]：v-on处理程序中的错误：TypeError:foo。那么…bind不是函数 发现于 -->在src/views/TestDb.vue 在src/App.vue

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

我现在的技巧是将这个上下文复制到另一个变量中，并调用这个变量作为更改数据组件，但esLint进程分析文件似乎不建议这样做。它有一个专门的规则

如何在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>

---

由于您使用的是箭头函数，因此无需添加以下内容：

或

---

由于您使用的是箭头函数，因此无需添加以下内容：

或

“删除绑定”箭头函数已执行绑定

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

供参考

你以前可以这么做的

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

“删除绑定”箭头函数已执行绑定

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

供参考

你以前可以这么做的

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

---

好的，我搜索了很多其他的东西，但没有关于箭头函数。感谢您的快速响应。我确认这很有效。也许这个小问题对其他人有帮助。好的，我搜索了很多其他的东西，但不是关于箭头函数。感谢您的快速响应。我确认这很有效。也许这个小问题能帮助别人。