Vue.js, @change üzerinde seçilen seçeneği alır

Öncelikle, Vue'da yeni olduğumu söylemek istiyorum ve bu benim Vue kullanan ilk projem. Birleşik giriş kutum var ve seçilen birleşik giriş kutusuna bağlı olarak farklı bir şey yapmak istiyorum. Ayrı vue.html ve typescript dosyası kullanıyorum. İşte kodum.

<select name="LeaveType" @change="onChange()" class="form-control">
     <option value="1">Annual Leave/ Off-Day</option>
     <option value="2">On Demand Leave</option>
</select>

ve işte benim ts dosyam

onChange(value) {
    console.log(value);
}

Typcript fonksiyonumda seçilen seçenek değeri nasıl elde edilir? Teşekkürler.

v-modelSeçilen seçeneğin değerinin değerini bağlamak için kullanın . İşte bir örnek .

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

Buradan daha fazla referans görülebilir .

@ , v-on için bir kısayol seçeneğidir . Kullanım @ bazı Vue yöntemlerini yürütmek istiyorum sadece. Vue yöntemlerini çalıştırmadığınız için, bunun yerine javascript işlevini çağırıyorsunuz, javascript işlevini çağırmak için onchange özniteliğini kullanmanız gerekir.

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

function onChange(value) {
  console.log(value);
}

Vue yöntemlerini aramak istiyorsanız, bunu şu şekilde yapın-

<select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

Değeri bağlamak için select öğesinde v-model data niteliğini kullanabilirsiniz .

<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

Bu yardımcı olur umarım :-)

Değiştirilen değer içinde olacak event.target.value

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <select name="LeaveType" @change="onChange" class="form-control">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
</div>

Kurtarma için v-modelini de kullanabilirsiniz.

<template>
    <select name="LeaveType" v-model="leaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            leaveType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.leaveType)
        }
    }
}
</script>

@ Change = "onChange ()" ve kullanım izleyicilerinizi kaydedebilirsiniz . Vue hesaplar ve izler, bunun için tasarlanmıştır. Diğer karmaşık Etkinlik özelliklerine değil, yalnızca değere ihtiyacınız olması durumunda.

Gibi bir şey:

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }