[Vuejs]-@submit not trigger a method vue/quasar

by

2👍

✅

I think the submit button will not work in the template of QInput. You need to put the Submit button outside of the QInput or you can use the button click event.

<q-form class="full-width" @submit="sendMessage">
         <div class="row">
          <q-input v-model="newMessage" bg-color="white" outlined rounded label="Message" class="col-11" dense>
          </q-input>
          <q-btn type="submit" icon="send" color="primary" round dense flat class="col-1" />
         </div>
       </q-form>

or

<div>
    <q-input v-model="newMessage" bg-color="white" outlined rounded label="Message" dense>
        <template v-slot:after>
          <q-btn type="submit" icon="send" color="white" @click="sendMessage" round dense flat />
        </template>
      </q-input>
</div>

https://codepen.io/Pratik__007/pen/eYmNqdg?editors=1010

NOTE: In the latest version of Quasar (1.2.4), q-btn components that are in the v-slot:after slot of a q-input component will no longer submit the q-form (even with type=”submit” added).

👤Pratik Patel

1👍

Change button type="submit" on method click. Quasar has changed something in recent releases

<q-btn @click="sendMessage" icon="send" color="white" round dense flat />
👤Vasil Laurynovich

Leave a comment