Question

注意：根据我的代码，正确答案在答案中。

引起的错误：在最新版本的Quasar（1.2.4）中，v-slot中的q-btn组件：q-input组件的插槽之后将不再提交q-form（即使类型为=“提交”）。

只想知道我在哪里弄错了我的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

注意：在最新版本的Quasar（1.2.4）中，位于v-slot中的q-btn组件：q-input组件的插槽之后将不再提交q-form（即使type = “已提交”）。

Answer 2

更改按钮类型=单击方法时提交。 Quasar在最新版本中进行了一些更改

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

@提交不触发方法vue / quasar

2 个答案: