Vue中的綁定輸入不起作用

Question

我想在用戶開始在輸入框中輸入時調用一個帶有值的函數。我嘗試了兩種方法。

第一種方法是嘗試使用雙向綁定到模型。但是，按照文檔後，我得到一個錯誤。

這裏是從官方文檔的例子：

<div id="app-6"> 
    <p>{{ message }}</p> 
    <input v-model="message"> 
</div> 


var app6 = new Vue({ 
    el: '#app-6', 
    data: { 
    message: 'Hello Vue!' 
    } 
}) 

這是我的例子：

<template lang="html"> 
    <input 
    type="text" 
    v-model="handle" 
    /> 
</template> 


<script>  
    export default { 
    data: { 
     handle: 'model', 
    } 
    }; 
</script> 

我寫這爲應用程序的一部分，所以我選擇不重新創建Vue的實例我在別處宣佈了這一點。然而，我得到這個錯誤：我試過的第二種方法是直接從視圖通過事件處理函數調用一個函數。我來自React，所以這是我的首選方法。但是，該函數未定義爲輸入值，這意味着它沒有提取輸入的值。

<template lang="html"> 
    <input 
    type="text" 
    v-on:keyup="handleInput()" 
    /> 
</template> 

<script> 
    export default { 
    methods: { 
     handleInput(input) { 
     // input -> undefined 
     }, 
    }, 
    }; 
</script> 

我真的不明白爲什麼這些作品都沒有。輸入監聽器的預期行爲不會傳遞該值嗎？

我哪裏錯了？

看起來你可能需要這樣做：How to fire an event when v-model changes ? (vue js)。我不明白爲什麼當你分配一個V模型時你必須手動附加一個觀察器？這不就是一個V模型應該做什麼？

什麼終於摸索是這樣的：

<template lang="html"> 
    <input 
    type="text" 
    v-model="searchTerm" 
    @keyup.enter="handleInput" 
    /> 
</template> 


<script> 
    export default { 
    data() { 
     return { searchTerm: '' } 
    }, 
    methods: { 
     handleInput(event) {/* handle input */}, 
    }, 
    }; 
</script> 

Answer 1

不宜data在你的第一個例子中的功能？我認爲這是如何工作的VUE組件。

<script>  
    export default { 
    data: function() { 
     return { handle: 'model' } 
    } 
    }; 
</script> 

我認爲這是在vuecasts.com某處解釋，但我可能是錯的。 :)