0

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
   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>
...

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!

dr b
  • 1,929
  • 2
  • 10
  • 14
  • possibly dupe of https://stackoverflow.com/questions/50635404/parentheses-while-calling-a-method-in-vue – dr b Mar 19 '22 at 18:00

2 Answers2

2

In Vue 3 composition API there is no this.

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

Roland
  • 24,554
  • 4
  • 99
  • 97
  • Good call out. Once i added the () to onSubmit call, `this` was no longer needed. When the () is removed, if you don't use `this` it throws a `showNotify is not defined` error. This feels like a quasar issue more than a vue issue. – dr b Mar 19 '22 at 17:52
1

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
   class="q-gutter-md text-body2"
   autofocus
   @submit="onSubmit()"
>
dr b
  • 1,929
  • 2
  • 10
  • 14
  • That cannot be the issue! @submit="onSubmit" works the same as @submit="onSubmit()". – Roland Mar 19 '22 at 17:16
  • Right? I agree with you, but that is what fixed it. Maybe it has something to do with the Quasar plugin and the way it handles the onSubmit logic? – dr b Mar 19 '22 at 17:50
  • I think is that's because you use a function directly in your `return` instead of `onSubmit: () => {...}`. If not bug, don't fix it. – Patfreeze Mar 21 '22 at 17:35