Vue.js中v-on绑定事件不触发函数 输入框输入时getUserSearch未执行

Vue 中绑定原生 DOM 事件时，直接使用原生事件名即可，不需要额外加on前缀。你写的v-on:oninput实际是监听名为oninput的自定义事件，而原生 input 元素输入时触发的是input事件，因此getUserSearch方法始终不会被触发。

将 input 标签的事件绑定逻辑修改为如下写法即可：

<!-- 完整写法 -->
<input type="text" placeholder="search here" v-model="v_model_search" v-on:input="getUserSearch()">
<!-- 也可以用Vue缩写写法 -->
<input type="text" placeholder="search here" v-model="v_model_search" @input="getUserSearch()">

修复后完整代码 #

<template>
    <div>
        <input type="text" placeholder="search here" v-model="v_model_search" @input="getUserSearch()">
        <p>{{v_model_search}}</p>
        <p>{{v_on_search}}</p>
    </div>
</template>

<script>
    export default {
        name: 'SearchBox',
        data () {
            return {
                v_model_search: '',
                v_on_search: ''
            }
        },
        methods: {
            getUserSearch ()
            {
                this.v_on_search = this.v_model_search
            }
        }
    }
</script>

内容的提问来源于stack exchange，提问作者Filipe