Vue 3 with Quasar - functions with parameters - TypeError: Cannot read properties of undefined

Question

我遇到了 Vue 3 和 Quasar 的问题，我认为这是一个我不理解的 Vue 3 问题，所以我想问一下。我已经看到其他关于此错误的问题，缺少的部分是回调所需的粗箭头函数，因此 vue 正确绑定 this，但我已经这样做了。

我正在使用新组合 API，在设置内部我正在创建一个函数，然后在 post 的回调期间调用该函数。发生这种情况时，我收到错误 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'showNotify').

奇怪的是，当我从 @click="showNotify('Vendor not created, response not 1',false)" 触发的测试通知按钮调用 showNotify 时，通知代码触发时没有错误。所以我推断这与提交有关。

这是简短的代码：

在模板部分：

<q-form
   class="q-gutter-md text-body2"
   autofocus
   @submit="onSubmit"
>
....
<div class="row  q-pt-md ">
  <q-btn label="Submit" type="submit" color="primary"/>
  <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
  <q-btn label='test notify' color='secondary' @click="showNotify('Vendor not created, response not 1',false)" />
</div>
...

然后我的脚本部分如下所示：

import { defineComponent, ref } from "vue";
import * as C from '../../Constants'
import { useQuasar } from 'quasar'

export default defineComponent({
    name:"VendorEntry",
    setup(){
        const $q = useQuasar();
       
        const name = ref(null);
        const number = ref(null);
        const address = ref(null);
        const phone = ref(null);
        const email = ref(null);
        const fax = ref(null);

        const showNotify = (messagein, positivein) => {
            let nopts = {
                message:messagein,
                color: (positivein ? 'positive':'negative'),
                icon: (positivein ? 'verified' : 'error'),
                timeout: (positivein ? 1500 : 3500)
            }
            
            $q.notify(nopts);
        }

        return{
            name,
            number, 
            address,
            phone,
            email,
            fax,
            showNotify,

            onSubmit(){

                const vendorPost = {
                    name: name.value,
                    number: number.value,
                    address: address.value,
                    phone: phone.value,
                    email: email.value,
                    fax: fax.value
                };

                console.log(JSON.stringify(vendorPost));

                fetch (`${C.BaseURLdev}/api/vendors`,
                {
                    method: 'post',
                    headers: {
                        'content-type': 'application/json'
                    },
                    body: JSON.stringify(vendorPost)
                }).then(response => response.json())
                  .then((data) => {
                      console.log(data);
                      if(data === 1){
                        this.showNotify("Vendor  was created successfully.", true);
                      }else{
                        this.showNotify("Vendor not created, response not 1", false);
                      }
                  }).catch(data => {
                      console.log(data);
                      this.showNotify("error thrown from post call, vendor not created", false);
                  });
            },
            
        }
    }
})

我认为这应该可行，但是当我提交表单时，这段代码总是在调用 this.showNotify 时出错。

我试过用几种不同的方式声明这个函数，像上面那样作为 const 和 returning，并且只是在 return return 中声明函数像 onSubmit() 一样，都给出相同的错误。

有人对此有什么想法吗？感谢观看！

Answer 1

按照传统，我在输入所有这些内容后就明白了。

在提交调用中，您需要在函数名称上加上括号才能正常工作。我不知道为什么，只是它需要在那里。

工作：

<q-form
   class="q-gutter-md text-body2"
   autofocus
   @submit="onSubmit()"
>

Answer 2

在 Vue 3 组合中 API 没有 this。

如果您在设置方法中删除 this，一切都会正常进行。

Vue 3 with Quasar - functions with parameters - TypeError: Cannot read properties of undefined

Vue 3 with Quasar - functions with parameters - TypeError: Cannot read properties of undefined

vue.js

quasar-framework

vuejs3