Vuejs Custom Component v-model & modelModifiers

Vuejs Custom Component V-model

Herkese merhabalar bu yazımızda sizlerle beraber vuejs custom olarak oluşturmuş olduğumuz bir component üzerinde v-model direktifini ve modelModifiersları nasıl kullanabiliriz onları ele alıyor olacağız.O zaman hadi başlayalım.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

projemizi oluşturduktan sonra src/components/CustomInput.vue dosyamızı oluşturuyoruz.

Daha sonra ilgili input oluşturup , içerisine value olarak v-model direktifinden gelen değeri kullanacağını belirtiyorum.(default olarak modelValue değeri v-model içerisinden okunabilir.) daha sonra ilgili input’a değer girildikçe emit edip gelen değeri güncelliyoruz.

<template>
<input  :value='modelValue'
@input="$emit('update:modelValue',$event.target.value)" />
</template>
<script>
export default {
props:{
modelValue:String,
},
emits:['update:modelValue']
}
</script>

Kullanım ;

src/App.vue içerisine gelip ilgili component’i import edip v-model diyerek kullanabiliriz.

<template>
<custom-input v-model="user.name"/>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
components: { CustomInput },
data(){
return{
user:{
name:'',
}
}}}
</script>

İsimlendirilmiş v-model direktifi oluşturma ;

Az önce oluşturduğumuz component içerisinde yalnızca v-model diyerek ilgili değeri bağlayabildik. Peki ya isimlendirerek bağlamak istersek ne yapıyoruz ?

Onu da şu şekilde ele alabiliriz.

<template>
<div>
<h2>Form</h2>
<div>
<input :value='firstName' @input="onChangeFirstName($event)" />
</div>
<div>
<input  :value='age' @input="onChangeAge($event)" />
</div>
</div>
</template>
<script>
export default {
methods:{
onChangeAge(e){
let ageValue=e.target.value;
this.$emit('update:age',ageValue)
},
onChangeFirstName(e){
let firstNameValue=e.target.value
this.$emit('update:firstName',firstNameValue)
}},
props:{
firstName:String,
age:String,
},
emits:['update:firstName','update:age']
}
</script>

isimlendirerek kullanımda ise tek yapmam gereken şey modelValue(default) değeri yerine artık başka bir isim ile kullanmak. Peki ya bunu nası kullanıyoruz işte oda şu şekilde ;

<template>
<p>{{user}}</p>
<custom-input v-model:firstName="user.name" v-model:age="user.age" />
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
components: { CustomInput },
data(){
return{
user:{
name:'',
age:''
}
}}}
</script>

tek yapmam gereken v-model direktifinden sonra hangi isimi bağlamak istiyorsam onu yazmak.

ModelModifiers;

Şimdi sıra modelModifierslarda adı üzerinde ilgili veriyi (modifiy) ediyoruz, değiştiriyoruz, düzeltiyoruz,kesiyoruz yada biçiyoruz tamamen bize kalmış birşey. Örneğin ben firstName alanını bağladıktan sonra yazdığım tüm değerlerin büyük harflerle olmasını istiyorum , age alanını bağladıktan sonra her tuşa bastığımda tersten yazılmış bir şekilde modele bağlamak istiyorum gibi ihtiyaçlarımız söz konusu ise yapmamız gereken tek şey ;

<template>
<div>
<h2>Form</h2>
<div>
<input :value='firstName' @input="onChangeFirstName($event)" /></div>
<div>
<input  :value='age' @input="onChangeAge($event)" />
</div>
</div>
</template>
<script>
export default {
methods:{
onChangeAge(e){
let ageValue=e.target.value;
if(this.ageModifiers){
ageValue=ageValue.split('').reverse().join('')
}
this.$emit('update:age',ageValue)
},
onChangeFirstName(e){
let firstNameValue=e.target.value
if(this.firstNameModifiers){
firstNameValue=firstNameValue.toUpperCase();
}
this.$emit('update:firstName',firstNameValue)}
},
props:{
firstName:String,
age:String,
firstNameModifiers:{
default:()=>{}},
ageModifiers:{
}},
emits:['update:firstName','update:age']
}
</script>

ilgili modifiers’ın tanımlı olup olmadığına bakıp, elimizdeki değer üzerinde ilgili duruma göre iş kodlarımızı yazıp aynı şekilde model’e bağlamak işte kullanımı ;

<template>
<p>{{user}}</p>
<custom-input v-model:firstName.bigger="user.name" v-model:age.reverse="user.age" />
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
components: { CustomInput },
data(){
return{
user:{
name:'',
age:''
}
}}}
</script>

aslında bütün olay bu kadar eğer hala anlayamadıysanız;

Vuejs dökümanına bakabilirsiniz.

Kanalımdaki videoya göz atabilirsini<.

Ve buradan kaynak koda ulaşabilirsiniz.

Herkese İyi Çalışmalar Dilerim.