Vue.js @ পরিবর্তে নির্বাচিত বিকল্প পান

Question 1

প্রথমত, আমি বলতে চাই যে ভিউতে আমি নতুন, এবং ভু ব্যবহার করে এটি আমার প্রথম প্রকল্প। আমার কম্বোবক্স রয়েছে এবং আমি নির্বাচিত কম্বোবক্সের ভিত্তিতে আলাদা কিছু করতে চাই। আমি পৃথক vue.html এবং টাইপস্ক্রিপ্ট ফাইল ব্যবহার করি। আমার কোড এখানে।

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

এবং এখানে আমার টিএস ফাইল

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

আমার টাইপ স্ক্রিপ্ট ফাংশনে নির্বাচিত বিকল্প মান কীভাবে পাবেন? ধন্যবাদ

Question 2

v-modelনির্বাচিত বিকল্পের মানটির সাথে আবদ্ধ করতে ব্যবহার করুন । এখানে একটি উদাহরণ ।

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

আরও রেফারেন্স এখান থেকে দেখা যায় ।

Question 3

@ ভি-অন এর জন্য একটি শর্টকাট বিকল্প । আপনি কেবলমাত্র কয়েকটি ভ্যু পদ্ধতি কার্যকর করতে চাইলে @ ব্যবহার করুন । যেহেতু আপনি ভ্যূ পদ্ধতিগুলি সম্পাদন করছেন না, পরিবর্তে আপনি জাভাস্ক্রিপ্ট ফাংশনটি কল করছেন, জাভাস্ক্রিপ্ট ফাংশনটি কল করতে আপনাকে অ্যানচেঞ্জ বৈশিষ্ট্যটি ব্যবহার করতে হবে

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

আপনি যদি ভ্যূ পদ্ধতিতে কল করতে চান তবে এটির মতো করুন-

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

আপনি মানটি আবদ্ধ করতে নির্বাচিত উপাদানটিতে ভি-মডেল ডেটা অ্যাট্রিবিউট ব্যবহার করতে পারেন ।

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

আশাকরি এটা সাহায্য করবে :-)

Question 4

পরিবর্তিত মানটি হবে 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>

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

Question 5

উদ্ধারের জন্য আপনি ভি-মডেলও ব্যবহার করতে পারেন

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

Question 6

আপনি আপনার @ পরিবর্তন = "অন চেঞ্জ ()" সংরক্ষণ করতে পারবেন ব্যবহারের পর্যবেক্ষক পারেন। ভিউ গণনা এবং ঘড়ি, এটি এর জন্য ডিজাইন করা। আপনার যদি কেবল মূল্য প্রয়োজন এবং অন্যান্য জটিল ইভেন্টের পরিমাণের প্রয়োজন হয় না।

কিছুটা এইরকম:

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