按Enter键,单击vuejs中的按钮

Question

这是我的小提琴:DEMO

有一个名为"fb-send"的按钮,必须在输入字段的"输入"按键上单击.怎么做到这一点？

<input @keyup.enter="" placeholder="Reply here" class="fb-comment-input" />
<i class="material-icons fb-button-right fb-send">&#x21E8;</i>

任何帮助将非常感激.谢谢.

Answer 1

您还可以直接在输入字段上调用fb_send的方法:

@keyup.enter="enterClicked()"

Answer 2

<Input v-model="value1" size="large" placeholder="large size" @keyup.enter.native="search"></Input>

Answer 3

2020 年 6 月 14 日

Enter 和 KeyPress 都可以使用。

以这样的形式获取输入字段：

<form v-on:keyup.enter="login">
    <input type="email" v-model="email">
    <input type="password" v-model="password">
    <button type="button" @click="login">Login</button>
</form>

Javascript 部分：

<script>
export default {
    data() {
        return {
            email: null,
            password: null
        }
    },
    methods: {
        login() {
           console.log("Login is working........");
       }
    }
}
</script>

Answer 4

您需要enterClick在输入字段内调用方法，如下所示：

<div id="app">
    <input @keyup.enter="enterClicked" placeholder="Reply here" class="fb-comment-input" />
    <i class="fb-send" @click="enterClicked">&#x21E8;</i>
</div>

<script>
    new Vue({
        el:'#app',
        methods:{
          enterClicked(){
             alert("Enter clicked")
          }
        }
    });
</script>

Answer 5

这是我的回答小提琴:ANSWER-DEMO

我用$ refs解决了这个问题.

new Vue({
    el:'#app',
  methods:{
    enterClicked(){
        alert("Enter clicked")
    },
    trigger () {
        this.$refs.sendReply.click()
    }
  }
})