Блог

Я хотел бы установить данные vue.js компонент с шаблоном кнопки и событием @click. Это событие вызывает компонент метода, который вызывает асинхронную функцию с обещанием.

Когда я нажимаю на свою кнопку, результат html-тега абзаца отображается правильно, но в то же время он выдает ошибку в моем браузере-инспекторе electron следующим образом :

vue.runtime.esm.js:620 [Предупреждение Vue]: ошибка в обработчике v-on: «Ошибка типа: foo.then(…).bind не является функцией»
найдено в
—> в src /views/TestDb.vue
в src /App.vue

Очень странно понимать, почему возникает ошибка, и в то же время выполнять свою работу….

Теперь я пытаюсь скопировать контекст this в другую переменную и вызвать эту переменную для изменения компонента данных, но, похоже, ESLint не советует анализировать файл в процессе. Для этого существует определенное правило.

Как может работать базовое обещание async для изменения данных с помощью шаблона кнопки нажатия на 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>
  

Поскольку вы используете функцию со стрелкой, нет необходимости добавлять bind(this) :

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

или

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

Удалите функцию bind «стрелка», которая уже выполнила привязку.

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

К ВАШЕМУ СВЕДЕНИЮ

Вы могли бы сделать это раньше

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