javascript Vue.js：更改时调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46305448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js: Calling function on change
提问by John P
I'm building a component in Vue.js. I have an input on the page where the user can request a certain credit amount. Currently, I'm trying to make a function that will log the input amount to the console, as I type it in. (Eventually, I'm going to show/hide the requested documents based on the user input. I don't want them to have to click a submit button.)
我正在 Vue.js 中构建一个组件。我在页面上有一个输入，用户可以在其中请求一定的信用额度。目前，我正在尝试创建一个函数，在我输入时将输入量记录到控制台。（最终，我将根据用户输入显示/隐藏请求的文档。我不希望他们必须单击提交按钮。）
The code below logs it when I tab/click out of the input field. Here's my component.vue:
当我从输入字段中选择/单击时，下面的代码会记录它。这是我的 component.vue：
<template>
<div class="col s12 m4">
<div class="card large">
<div class="card-content">
<span class="card-title">Credit Limit Request</span>
<form action="">
<div class="input-field">
<input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text">
<label for="credit-limit-input">Credit Limit Amount</label>
</div>
</form>
<p>1. If requesting ,000 or more, please attach Current Balance Sheet (less than 1 yr old).</p>
<p>2. If requesting 0,000 or more, also attach Current Income Statement and Latest Income Tax Return.</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'licenserow',
data: () => ({
creditLimit: ""
}),
methods: {
logCreditLimit: function (){
console.log(this.creditLimit)
}
}
}
</script>
If I change methodsto computed, it works - but I get an error saying Invalid handler for event: changeevery time it logs the value.
如果我更改methods为computed，它会起作用 - 但Invalid handler for event: change每次记录该值时我都会收到一条错误消息。
回答by Bert
Use the inputevent.
使用input事件。
<input v-model="creditLimit" v-on:input="logCreditLimit" id="credit-limit-input" type="text">
changeonly fires when the element loses focusfor input elements. inputfires each time the text changes.
change仅在元素失去输入元素的焦点时触发。input每次文本更改时触发。
回答by John P
Binding @input event alongside with v-model is unnecessary. Just bind v-model and thats all. Model is automatically updated on input event.
不需要将 @input 事件与 v-model 绑定在一起。只需绑定 v-model 就可以了。模型在输入事件时自动更新。
new Vue({
el: '#app',
data: {
message: ''
}
})<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<input type="text" v-model="message"><br>
Output: <span>{{ message }}</span>
</div>And if you need log it on change to console, create particular watcher:
如果您需要将其登录到控制台，请创建特定的观察者：
new Vue({
el: '#app',
data: {
message: ''
},
watch: {
message: function (value) {
console.log(value) // log it BEFORE model is changed
}
}
})<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
<input type="text" v-model="message"><br>
Output: <span>{{ message }}</span>
</div>