v-model 更改时如何触发事件？

Posted 2023-02-22

【中文标题】v-model 更改时如何触发事件？

【英文标题】：How to fire an event when v-model changes?

【发布时间】：2016-01-20 08:04:01

【问题描述】：

我正在尝试使用@click 触发foo() 函数，但如您所见，需要按两次单选按钮才能正确触发事件。仅在您第二次按下时捕获该值...

我想在没有@click 的情况下触发事件，仅在v-model (srStatus) 更改时触发事件。

这是我的小提琴：

http://fiddle.jshell.net/wanxe/vsa46bw8/

【问题讨论】：

小提琴链接不再起作用。

如果调用foo() 的目的是进行非模板更改，请使用watcher

这是一个很好的例子，说明为什么在问题中需要代码。如果可能，请恢复它并在此处显示。

我希望我能检索到问题的代码，但那已经是 5 年前了……幸运的是我们有很好的答案

【参考方案1】：

发生这种情况是因为您的 click 处理程序在单选按钮的值更改之前触发。您需要改为收听change 事件：

<input 
  type="radio" 
  name="optionsRadios" 
  id="optionsRadios2" 
  value=""
  v-model="srStatus" 
  v-on:change="foo"> //here

另外，请确保您真的想在准备好时致电 foo()... 似乎您实际上并不想这样做。

ready:function()
    foo();
,

【讨论】：

您将如何处理滑块？

文档中列出的可用事件在哪里。没找到？

这些只是标准的 javascript 事件，您可以在这里找到：developer.mozilla.org/en-US/docs/Web/Events#Standard_events

谢谢！但是 Ready:function 对我不起作用。相反，方法： foo()//do something

另外注意，如果你想在自定义vue组件（单文件组件）上注册“v-on:change”事件，应该使用“v-on:input”代替。

【参考方案2】：

您实际上可以通过删除 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);
                
            
        
    
);

【讨论】：

你能自动观看任何型号的变化吗？例如对于一个包含多个输入的表单，所有这些都需要被监视？

@EricBurel 我知道这很旧，但答案是否定的。您无法查看所有字段绑定到的整个数据对象，您需要单独查看该对象的每个属性，这使得这种方法对于具有大量字段的表单上的大记录存在问题。

@EricBurel 实际上你可以观察嵌套对象的 'deep' 属性设置为 'true' --> vuejs.org/v2/api/#watch

【参考方案3】：

只是为了补充上面的正确答案，在Vue.JS v1.0你可以写

<a v-on:click="doSomething">

所以在这个例子中是

 v-on:change="foo"

见：http://v1.vuejs.org/guide/syntax.html#Arguments

【参考方案4】：

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)                   // 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>

【讨论】：

keyDown 比按下“退格键”不起作用。所以最好使用@input

在这个小提琴中，我们看到退格与@keyDown jsfiddle.net/rLzm0f1q 一起使用（但我并不是说@input 是好是坏）

【参考方案5】：

你应该使用@input:

<input @input="handleInput" />

@input 在用户更改输入值时触发。

@change 在用户更改值和取消焦点输入时触发（例如单击外部某处）

您可以在这里看到不同之处：https://jsfiddle.net/posva/oqe9e8pb/