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

I'm having an issue with Vue 3 and Quasar and I think it's a vue 3 issue i'm not understanding so thought I'd ask. I've seen other questions with this error and the missing piece is a fat arrow function needed on the callback so vue binds this correctly, but i'm already doing that.

I'm using the new composition API, and inside of setup i'm creating a function, and then calling that function during the callback of a post. When that happens I get the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'showNotify').

the weird thing that when I call showNotify from the test notify button where it's fired by @click="showNotify('Vendor not created, response not 1',false)", the notify code fires with no errors. So i've deduced that it's something with the submit.

Here's the brief code:

in template section:

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

and then my script section looks like this:

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);
                  });
            },
            
        }
    }
})

I think this should work but this code always errors on the call to this.showNotify when i submit the form.

I've tried declaring the function in several different ways, both as a const and returning that like the above, and just declaring the function in the return return like onSubmit(), and both give the same error.

Anyone have any ideas on this? thanks for looking!

CodePudding user response：

In Vue 3 composition API there is no this.

If you remove this inside the setup method everything should work fine.

CodePudding user response：

I figured it out after typing all this up, as is tradition.

in the call to submit, you need to have the parentheses on the function name for it to work correctly. I don't know why, just that it needs to be there.

working:

<q-form
   
   autofocus
   @submit="onSubmit()"
>