@submit 不触发方法 vue/quasar

Question

NOTE: According to my code correct answer is in answers.

BUG CAUSED: 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).

只是想知道我在哪里弄错了我的 q-btn 没有触发 sendMessage() 方法。

<template>
  <q-page class="flex column">

    <div class="q-pa-md column col justify-end">
      <q-chat-message
        v-for="message in messages"
        :key="message.text"
        :name="message.from"
        :text="[message.text]"
        :sent="message.from === 'me' ? true : false"
      />
    </div>

    <q-footer elevated class="bg-secondary">
      <q-toolbar>
        <q-form class="full-width" @submit="sendMessage">
          <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" round dense flat />
            </template>
          </q-input>
        </q-form>
      </q-toolbar>
    </q-footer>

  </q-page>
</template>

<script>
export default {
  data() {
    return {
      newMessage: '',
      messages: [
        {
          text: 'Yo dude',
          from: 'me'
        },
        {
          text: 'Yo dude im them',
          from: 'them'
        },
        {
          text: 'Yo duqweqrfq',
          from: 'me'
        }
      ]
    }
  },
  methods: {
    sendMessage() {
      console.log('a new message arrived');
      this.messages.push({
        text: this.newMessage,
        from: 'me'
      });
    }
  }
};
</script>

Answer 1

我认为提交按钮在 QInput 的模板中不起作用。您需要将提交按钮放在 QInput 之外，或者您可以使用按钮单击事件。

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

或

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

Answer 2

更改按钮类型=点击方法提交。 Quasar 在最近的版本中有所改变

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

@submit 不触发方法 vue/quasar

@submit not trigger a method vue/quasar

vue.js

vuex

quasar