Làm thế nào để kích hoạt một sự kiện khi mô hình v thay đổi?

Question 1

Tôi đang cố gắng kích foo()hoạt chức năng với @clicknhưng như bạn thấy, cần nhấn nút radio hai lần để kích hoạt sự kiện một cách chính xác. Chỉ bắt giá trị lần thứ hai khi bạn nhấn ...

Tôi muốn kích hoạt sự kiện mà không @clickchỉ kích hoạt sự kiện khi v-model(srStatus) thay đổi.

đây là Fiddle của tôi:

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

Question 2

Điều này xảy ra vì clicktrình xử lý của bạn kích hoạt trước khi giá trị của nút radio thay đổi. changeThay vào đó, bạn cần lắng nghe sự kiện:

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

Ngoài ra, hãy chắc chắn rằng bạn thực sự muốn gọi điện foo()sẵn sàng ... có vẻ như có thể bạn không thực sự muốn làm điều đó.

ready:function(){
    foo();
},

Question 3

Bạn thực sự có thể đơn giản hóa điều này bằng cách xóa các v-onchỉ thị:

<input type="radio" name="optionsRadios" id="optionsRadios1" value="1" v-model="srStatus">

Và sử dụng watchphương pháp để lắng nghe sự thay đổi:

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);
                }
            }
        }
    }
});

Question 4

Vue2: nếu bạn chỉ muốn phát hiện sự thay đổi về độ mờ đầu vào (ví dụ sau khi nhấn enter hoặc nhấp vào một nơi khác) hãy làm (thêm thông tin tại đây )

<input @change="foo" v-model... >

Nếu bạn muốn phát hiện các thay đổi ký tự đơn lẻ (trong khi người dùng nhập), hãy sử dụng

<input @keydown="foo" v-model... >

Bạn cũng có thể sử dụng @keyupvà @inputcác sự kiện. Nếu bạn muốn chuyển các tham số bổ sung sử dụng trong mẫu ví dụ @keyDown="foo($event, param1, param2)". So sánh bên dưới (phiên bản có thể chỉnh sửa tại đây )

Hiển thị đoạn mã

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>

Mở rộng đoạn mã

Question 5

Bạn nên sử dụng @input:

<input @input="handleInput" />

@input kích hoạt khi người dùng thay đổi giá trị đầu vào.

@change kích hoạt khi người dùng thay đổi giá trị và đầu vào không tập trung (ví dụ: được nhấp vào một nơi nào đó bên ngoài)

Bạn có thể thấy sự khác biệt tại đây: https://jsfiddle.net/posva/oqe9e8pb/

Question 6

Chỉ cần thêm vào câu trả lời đúng ở trên, trong Vue.JS v1.0, bạn có thể viết

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

Vì vậy, trong ví dụ này, nó sẽ là

 v-on:change="foo"

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