Javascript v-model 更改时如何触发事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33257379/
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
How to fire an event when v-model changes?
提问by jnieto
I'm trying to fire the foo()function with the @clickbut as you can see, need press the radio button two times to fire the event correctly . Only catch the value the second time that you press...
我正在尝试使用 来触发该foo()功能，@click但是正如您所看到的，需要按两次单选按钮才能正确触发事件。仅在您第二次按下时捕获该值...
I want to fire the event without @clickonly fire the event when v-model(srStatus) changes.
我想触发事件而不@click只是在v-model(srStatus) 更改时触发事件。
here is my Fiddle:
这是我的小提琴：
采纳答案by pherris
This happens because your clickhandler fires before the value of the radio button changes. You need to listen to the changeevent instead:
发生这种情况是因为您的click处理程序在单选按钮的值更改之前触发。您需要改为监听change事件：
<input
type="radio"
name="optionsRadios"
id="optionsRadios2"
value=""
v-model="srStatus"
v-on:change="foo"> //here
Also, make sure you really want to call foo()on ready... seems like maybe you don't actually want to do that.
另外，请确保您真的想要调用foo()ready... 似乎您实际上并不想这样做。
ready:function(){
foo();
},
回答by Stephen Hallgren
You can actually simplify this by removing the v-ondirectives:
您实际上可以通过删除v-on指令来简化此操作：
<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">
And use the watchmethod to listen for the change:
并使用watch方法监听变化：
new Vue ({
el: "#app",
data: {
cases: [
{ name: 'case A', status: '1' },
{ name: 'case B', status: '0' },
{ name: 'case C', status: '1' }
],
activeCases: [],
srStatus: ''
},
watch: {
srStatus: function(val, oldVal) {
for (var i = 0; i < this.cases.length; i++) {
if (this.cases[i].status == val) {
this.activeCases.push(this.cases[i]);
alert("Fired! " + val);
}
}
}
}
});
回答by Kamil Kie?czewski
Vue2:if you only want to detect change on input blur (e.g. after press enter or click somewhere else) do (more info here)
Vue2：如果您只想检测输入模糊的变化（例如在按 Enter 或单击其他地方后）执行（更多信息在这里）
<input @change="foo" v-model... >
If you wanna detect single character changes (during user typing) use
如果您想检测单个字符更改（在用户输入期间），请使用
<input @keydown="foo" v-model... >
You can also use @keyupand @inputevents. If you wanna to pass additional parameters use in template e.g. @keyDown="foo($event, param1, param2)". Comparision below (editable version here)
您还可以使用@keyup和@input事件。如果你想在模板中传递额外的参数，例如 @keyDown="foo($event, param1, param2)". 下面的比较（可编辑版本在这里）
new Vue({
el: "#app",
data: {
keyDown: { key:null, val: null, model: null, modelCopy: null },
keyUp: { key:null, val: null, model: null, modelCopy: null },
change: { val: null, model: null, modelCopy: null },
input: { val: null, model: null, modelCopy: null },
},
methods: {
keyDownFun: function(event){ // type of event: KeyboardEvent
console.log(event);
this.keyDown.key = event.key; // or event.keyCode
this.keyDown.val = event.target.value; // html current input value
this.keyDown.modelCopy = this.keyDown.model; // copy of model value at the moment on event handling
},
keyUpFun: function(event){ // type of event: KeyboardEvent
console.log(event);
this.keyUp.key = event.key; // or event.keyCode
this.keyUp.val = event.target.value; // html current input value
this.keyUp.modelCopy = this.keyUp.model; // copy of model value at the moment on event handling
},
changeFun: function(event) { // type of event: Event
console.log(event);
this.change.val = event.target.value; // html current input value
this.change.modelCopy = this.change.model; // copy of model value at the moment on event handling
},
inputFun: function(event) { // type of event: Event
console.log(event);
this.input.val = event.target.value; // html current input value
this.input.modelCopy = this.input.model; // copy of model value at the moment on event handling
}
}
})div {
margin-top: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Type in fields below (to see events details open browser console)
<div id="app">
<div><input type="text" @keyDown="keyDownFun" v-model="keyDown.model"><br> @keyDown (note: model is different than value and modelCopy)<br> key:{{keyDown.key}}<br> value: {{ keyDown.val }}<br> modelCopy: {{keyDown.modelCopy}}<br> model: {{keyDown.model}}</div>
<div><input type="text" @keyUp="keyUpFun" v-model="keyUp.model"><br> @keyUp (note: model change value before event occure) <br> key:{{keyUp.key}}<br> value: {{ keyUp.val }}<br> modelCopy: {{keyUp.modelCopy}}<br> model: {{keyUp.model}}</div>
<div><input type="text" @change="changeFun" v-model="change.model"><br> @change (occures on enter key or focus change (tab, outside mouse click) etc.)<br> value: {{ change.val }}<br> modelCopy: {{change.modelCopy}}<br> model: {{change.model}}</div>
<div><input type="text" @input="inputFun" v-model="input.model"><br> @input<br> value: {{ input.val }}<br> modelCopy: {{input.modelCopy}}<br> model: {{input.model}}</div>
</div>回答by Peretz30
You should use @input:
你应该使用@input：
<input @input="handleInput" />
@inputfires when user changes input value.
@input当用户更改输入值时触发。
@changefires when user changed value and unfocus input (for example clicked somewhere outside)
@change当用户更改值并取消焦点输入时触发（例如单击外部某处）
You can see the difference here: https://jsfiddle.net/posva/oqe9e8pb/
你可以在这里看到区别：https: //jsfiddle.net/posva/oqe9e8pb/
回答by Matthew
Just to add to the correct answer above, in Vue.JS v1.0 you can write
只是为了补充上面的正确答案，在 Vue.JS v1.0 中你可以写
<a v-on:click="doSomething">
So in this example it would be
所以在这个例子中，它将是
v-on:change="foo"
