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

【问题标题】：basic async call on @click event in template vuejs模板vuejs中@click事件的基本异步调用
【发布时间】：2023-04-03 13:41:01
【问题描述】：

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

当我点击我的按钮时，段落标签 html 的结果会正确显示，但同时它会在我的检查器浏览器电子中产生一个错误，如下所示：

vue.runtime.esm.js:620 [Vue 警告]：v-on 处理程序出错：“TypeError：foo.then(...).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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

去掉bind' 箭头函数已经完成了绑定。

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

仅供参考

你以前可以这样做

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

【讨论】：

【解决方案2】：

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

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

或

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

【讨论】：

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