ভি-মডেল পরিবর্তিত হলে কীভাবে একটি ইভেন্ট ফায়ার করবেন?

Question 1

আমি foo()ফাংশনটি দিয়ে গুলি চালানোর চেষ্টা করছি @clickতবে আপনি দেখতে পাচ্ছেন, ইভেন্টটি সঠিকভাবে ফায়ার করতে দুবার রেডিও বোতাম টিপতে হবে। আপনি দ্বিতীয়বার চাপলে কেবল মানটি ধরুন ...

@clickযখন v-model(এসআর স্ট্যাটাস) পরিবর্তন হয় কেবলমাত্র ইভেন্টটিকেই আমি আগুন না দিয়ে ইভেন্টটি ফায়ার করতে চাই ।

এখানে আমার ফিডল:

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

Question 2

এটি ঘটে কারণ clickরেডিও বোতামের মান পরিবর্তনের আগে আপনার হ্যান্ডলারটি গুলি চালায়। changeপরিবর্তে আপনার ইভেন্টটি শুনতে হবে:

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

এছাড়াও, নিশ্চিত হয়ে নিন যে আপনি সত্যিই foo()প্রস্তুতকে কল করতে চান ... মনে হচ্ছে সম্ভবত আপনি এটি করতে চান না।

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

Question 3

আপনি 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);
                }
            }
        }
    }
});

Question 4

ভ্যু 2: যদি আপনি কেবল ইনপুট ব্লারটিতে পরিবর্তন সনাক্ত করতে চান (উদাহরণস্বরূপ এন্টার টিপুন বা অন্য কোথাও ক্লিক করুন) করুন (আরও তথ্য এখানে )

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

আপনি যদি একক অক্ষরের পরিবর্তনগুলি (ব্যবহারকারী টাইপ করার সময়) ব্যবহার সনাক্ত করতে চান

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

আপনি ব্যবহার @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>

স্নিপেট প্রসারিত করুন

Question 5

আপনার ব্যবহার করা উচিত @input:

<input @input="handleInput" />

@input ব্যবহারকারী যখন ইনপুট মান পরিবর্তন করে তখন অগ্নিসংযোগ করে।

@change ব্যবহারকারী যখন মান এবং আনফোকস ইনপুট পরিবর্তন করে তখন আগুন লাগে (উদাহরণস্বরূপ বাইরে কোথাও ক্লিক করা হয়েছে)

আপনি এখানে পার্থক্যটি দেখতে পারেন: https://jsfiddle.net/posva/oqe9e8pb/

Question 6

শুধু উপরে সঠিক উত্তর যুক্ত করতে, Vue.JS v1.0 এ আপনি লিখতে পারেন

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

সুতরাং এই উদাহরণে এটি হবে

 v-on:change="foo"

দেখুন: http://v1.vuejs.org/guide/syntax.html#Arguments