Component v-model ​

টু-ওয়ে বাইন্ডিং বাস্তবায়ন করতে একটি কম্পোনেন্টে v-মডেল ব্যবহার করা যেতে পারে।

প্রথমে আসুন একটি নেটিভ এলিমেন্টে কীভাবে v-মডেল ব্যবহার করা হয় তা আবার দেখা যাক:

<input v-model="searchText" />

হুডের নিচে, টেমপ্লেট কম্পাইলার v-model-কে আমাদের জন্য আরও ভারবোজ সমতুল্য করে প্রসারিত করে। সুতরাং উপরের কোডটি নিম্নলিখিত হিসাবে একই কাজ করে:

<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

একটি কম্পোনেন্টে ব্যবহার করা হলে, v-model এর পরিবর্তে এতে প্রসারিত হয়:

<CustomInput
  :model-value="searchText"
  @update:model-value="newValue => searchText = newValue"
/>

যদিও এটি আসলে কাজ করার জন্য, <CustomInput> কম্পোনেন্টটিকে অবশ্যই দুটি জিনিস করতে হবে:

1. একটি নেটিভ <input> কম্পোনেন্টের value বৈশিষ্ট্যকে modelValue প্রপের সাথে আবদ্ধ করুন
2. যখন একটি নেটিভ input ইভেন্ট ট্রিগার হয়, তখন নতুন মান সহ একটি update:modelValue কাস্টম ইভেন্ট নির্গত করুন

এখানে এটি কর্মে রয়েছে:

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

এখন v-model এই কম্পোনেন্টটির সাথে পুরোপুরি কাজ করা উচিত:

<CustomInput v-model="searchText" />

এই কম্পোনেন্টের মধ্যে v-model বাস্তবায়নের আরেকটি উপায় হল একটি লিখনযোগ্য computed বৈশিষ্ট্য একটি গেটার এবং একটি সেটারের সাথে ব্যবহার করা। get পদ্ধতিটি modelValue বৈশিষ্ট্য প্রদান করবে এবং set পদ্ধতিটি সংশ্লিষ্ট ইভেন্ট নির্গত করবে:

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <input v-model="value" />
</template>

v-model arguments ​

ডিফল্টরূপে, একটি কম্পোনেন্টে v-model প্রপ হিসেবে modelValue এবং update:modelValue ইভেন্ট হিসেবে ব্যবহার করে। আমরা এই নামগুলিকে 'v-মডেল'-এ একটি যুক্তি পাস করে সংশোধন করতে পারি:

<MyComponent v-model:title="bookTitle" />

এই ক্ষেত্রে, চাইল্ড কম্পোনেন্টের একটি title প্রপ আশা করা উচিত এবং প্যারেন্ট মান আপডেট করার জন্য একটি update:title ইভেন্ট নির্গত করা উচিত:

<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

Multiple v-model bindings ​

v-model arguments দিয়ে আমরা আগে যেমন শিখেছি তেমন কোনো নির্দিষ্ট প্রপ এবং ইভেন্টকে টার্গেট করার ক্ষমতাকে কাজে লাগিয়ে, আমরা এখন একটি একক কম্পোনেন্ট ইনস্ট্যান্সে একাধিক v-model বাইন্ডিং তৈরি করতে পারি।

প্রতিটি v-model কম্পোনেন্টে অতিরিক্ত বিকল্পের প্রয়োজন ছাড়াই একটি ভিন্ন প্রপের সাথে সিঙ্ক করবে:

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

Handling v-model modifiers ​

আমরা যখন ফর্ম ইনপুট বাইন্ডিং সম্পর্কে শিখছিলাম, তখন আমরা দেখেছিলাম যে v-model-এ রয়েছে বিল্ট-ইন মডিফায়ার - .trim, .number এবং .lazy। কিছু ক্ষেত্রে, আপনি কাস্টম সংশোধককে সমর্থন করার জন্য আপনার কাস্টম ইনপুট কম্পোনেন্টটিতে v-modelও চাইতে পারেন।

আসুন একটি উদাহরণ তৈরি করি কাস্টম মডিফায়ার, capitalize, যা v-model বাইন্ডিং দ্বারা প্রদত্ত স্ট্রিংয়ের প্রথম অক্ষরকে বড় করে তোলে:

<MyComponent v-model.capitalize="myText" />

একটি কম্পোনেন্ট v-model-এ যোগ করা সংশোধকগুলিকে modelModifiers প্রপের মাধ্যমে কম্পোনেন্টকে প্রদান করা হবে। নিচের উদাহরণে, আমরা একটি কম্পোনেন্ট তৈরি করেছি যাতে একটি 'modelModifiers' প্রপ রয়েছে যা একটি খালি অবজেক্টতে ডিফল্ট হয়:

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

defineEmits(['update:modelValue'])

console.log(props.modelModifiers) // { capitalize: true }
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

লক্ষ্য করুন কম্পোনেন্টের modelModifiers প্রপে capitalize আছে এবং এর মান true - কারণ এটি v-model বাইন্ডিং v-model.capitalize="myText"-এ সেট করা হয়েছে।

এখন যেহেতু আমরা আমাদের প্রপ সেট আপ করেছি, আমরা modelModifiers অবজেক্ট কীগুলি পরীক্ষা করতে পারি এবং নির্গত মান পরিবর্তন করতে একটি হ্যান্ডলার লিখতে পারি। নিচের কোডে আমরা যখনই <input /> কম্পোনেন্টটি একটি input ইভেন্ট ফায়ার করে তখনই আমরা স্ট্রিংটিকে ক্যাপিটালাইজ করব।

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

Modifiers for v-model with arguments ​

আর্গুমেন্ট এবং মডিফায়ার উভয়ের সাথে v-model বাইন্ডিংয়ের জন্য, জেনারেট করা প্রপের নাম হবে arg + "Modifiers"। উদাহরণ স্বরূপ:

<MyComponent v-model:title.capitalize="myText">

সংশ্লিষ্ট ঘোষণাগুলি হওয়া উচিত:

const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }

export default {
  props: ['title', 'titleModifiers'],
  emits: ['update:title'],
  created() {
    console.log(this.titleModifiers) // { capitalize: true }
  }
}

Here's another example of using modifiers with multiple v-model with different arguments:

<UserName
  v-model:first-name.capitalize="first"
  v-model:last-name.uppercase="last"
/>

<script setup>
const props = defineProps({
  firstName: String,
  lastName: String,
  firstNameModifiers: { default: () => ({}) },
  lastNameModifiers: { default: () => ({}) }
})
defineEmits(['update:firstName', 'update:lastName'])

console.log(props.firstNameModifiers) // { capitalize: true }
console.log(props.lastNameModifiers) // { uppercase: true}
</script>

<script>
export default {
  props: {
    firstName: String,
    lastName: String,
    firstNameModifiers: {
      default: () => ({})
    },
    lastNameModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:firstName', 'update:lastName'],
  created() {
    console.log(this.firstNameModifiers) // { capitalize: true }
    console.log(this.lastNameModifiers) // { uppercase: true}
  }
}
</script>