我正在尝试使用 @click
触发 foo()
功能,但如您所见,需要按两次单选按钮才能正确触发事件。仅在您第二次按下时捕获该值...
我想在没有 @click
的情况下触发事件,仅在 v-model
(srStatus) 更改时触发事件。
这是我的小提琴:
http://fiddle.jshell.net/wanxe/vsa46bw8/
foo()
的目的是进行非模板更改,请使用 watcher
您实际上可以通过删除 v-on
指令来简化此操作:
<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">
并使用 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);
}
}
}
}
});
发生这种情况是因为您的 click
处理程序在单选按钮的值更改之前触发。您需要改为监听 change
事件:
<input
type="radio"
name="optionsRadios"
id="optionsRadios2"
value=""
v-model="srStatus"
v-on:change="foo"> //here
另外,请确保您真的想在准备好时调用 foo()
... 似乎您实际上并不想这样做。
ready:function(){
foo();
},
您应该使用 @input
:
<input @input="handleInput" />
@input
在用户更改输入值时触发。
@change
在用户更改值和取消焦点输入时触发(例如单击外部某处)
您可以在这里看到不同之处:https://jsfiddle.net/posva/oqe9e8pb/
Vue2: 如果您只想检测输入模糊的变化(例如,按下回车键或单击其他位置后),请执行(更多信息 here)
<input @change="foo" v-model... >
如果您想检测单个字符的更改(在用户输入期间),请使用
<input @keydown="foo" v-model... >
您还可以使用 @keyup
和 @input
事件。如果您想传递额外的参数,请在模板中使用,例如 @keyDown="foo($event, param1, param2)"
。下面的比较(可编辑版本 here)
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){ //事件类型:KeyboardEvent console.log(event); this.keyDown.key = event.key; // 或 event.keyCode this.keyDown.val = event.target.value; // html 当前输入值 this.keyDown. modelCopy = this.keyDown.model; // 事件处理时模型值的副本 }, keyUpFun: function(event){ // 事件类型:KeyboardEvent console.log(event); this.keyUp.key = event .key; // 或 event.keyCode this.keyUp.val = event.target.value; // html 当前输入值 this.keyUp.modelCopy = this.keyUp.model; // 事件发生时模型值的拷贝processing }, changeFun: function(event) { // 事件类型:事件 console.log(event); this.change.val = event.target.value; // html 当前输入价值 this.change.modelCopy = this.change.model; // 事件处理时模型值的副本 }, inputFun: function(event) { // 事件类型:事件 console.log(event); this.input.val = event.target.value; // html 当前输入值 this.input.modelCopy = this.input.model; // 事件处理时模型值的副本 } } }) div { margin-top: 20px; } 在下方输入字段(查看事件详情打开浏览器控制台)
只是为了添加上面的正确答案,在 Vue.JS v1.0 中,您可以编写
<a v-on:click="doSomething">
所以在这个例子中它将是
v-on:change="foo"
请参阅:http://v1.vuejs.org/guide/syntax.html#Arguments
不定期副业成功案例分享