在按 Enter 键时，单击 vuejs 中的按钮答案

【问题标题】：On key press of Enter, click a button in vuejs在按 Enter 键时，单击 vuejs 中的按钮
【发布时间】：2017-10-09 05:48:28
【问题描述】：

这是我的小提琴：DEMO

有一个名为“fb-send”的按钮，必须在输入字段中的“enter”上单击按键。如何做到这一点？

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

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

@keyup.enter="enterClicked()"

【讨论】：

我只使用 enterClicked() 来检测图标是否被点击。所以我不能直接按 Enter 键分配方法:)

【解决方案2】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案3】：

这是我的答案：ANSWER-DEMO

我使用 $refs 解决了这个问题。

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

【讨论】：

谢谢！问题：如何避免 shift+enter 或 ctr+enter 触发方法 'trigger()'。我想 shift+enter 换行。

【解决方案4】：

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>

【讨论】：

【解决方案5】：

您需要在输入字段中调用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>

【讨论】：

我只使用 enterClicked() 来检测图标是否被点击。所以我不能直接按 Enter 键分配方法:)
@IncharaRaveendra 提供的示例运行良好...您可以在这里查看：jsfiddle.net/nosferatu79/52a7ppt2/3

【解决方案6】：

请使用@keyup.enter.native=function()，这会起作用。

native 函数是你的浏览器/服务器/JavaScript 提供的函数

【讨论】：

【解决方案7】：

        $("form").keypress(function (e) {
            debugger;
            if(e.charCode == 13){
                e.stopImmediatePropagation();
                e.preventDefault();
            }
        });

【讨论】：

这个答案可以通过一些解释来改进。
问题是针对遵循 MVVM 模式的 vuejs。 jQuery 的范围是不切实际的