v-model (v-model)
اینجا «دستور v-model ویو» را ساده می کنیم. «دوبل جهته (Two-way)» یعنی داده و ورودی همزمان هماهنگ شوند. مثل پیام رسان؛ تایپ می کنی و نمایش فوری می بینی. پس با v-model بین فرم و داده پل می زنیم.
تعریف کوتاه و کاربرد
v-model روی ورودی ها یا کامپوننت ها «دوبل جهته» می سازد. تغییر ورودی، داده را عوض می کند. همچنین تغییر داده، ورودی را به روز می کند. روی <input> و <select> و <textarea> کار می کند.
نمونه پایه: اتصال ورودی و داده
این نمونه مقدار inputValue را با یک <input> هماهنگ می کند. مثل دفتر نمره؛ می نویسی و پایین همان را می بینی.
<template>
<h1>v-model Example</h1>
<p>Write something, and see the 'inputValue' data property update automatically.</p>
<input type="text" v-model="inputValue">
<p>inputValue property: "{{ inputValue }}"</p>
</template>
روی کامپوننت ها: props و emits
روی کامپوننت، v-model با props و emits کار می کند. نام پیش فرض prop برابر modelValue است. رویداد پیش فرض هم update:modelValue است.
<template>
<h2>Example v-model Directive</h2>
<p>App.vue 'text' property: "{{ text }}"</p>
<comp-one v-model="text" />
</template>
<script>
export default {
data() {
return {
text: 'Say Cheese';
};
}
};
<\/script>
<template>
<div>
<h3>Component</h3>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</div>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue']
};
<\/script>
Computed get/set برای کنترل تمیزتر
می توانیم مقدار را با computed بگیریم و بفرستیم. سپس در set مقدار جدید را emit می کنیم.
<template>
<div>
<input v-model="inpVal" />
</div>
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
inpVal: {
get() {
return this.modelValue;
},
set(v) {
this.$emit('update:modelValue', v);
}
}
}
};
<\/script>
تغییر نام prop با v-model:
می توانیم نام های پیش فرض را تغییر دهیم. مثلا v-model:message استفاده کنیم.
<template>
<comp-one v-model:message="text" />
</template>
<script>
export default {
data() {
return {
text: 'Say Cheese';
};
}
};
<\/script>
Modiferها: .lazy و .trim
modifier یعنی پسوند رفتاری. .lazy با رویداد change همگام می شود. .trim فاصله ابتدا و پایان را حذف می کند.
<template>
<input type="text" v-model.lazy="inputValue" />
<p>inputValue: "{{ inputValue }}"</p>
</template>
<script>
export default {
data() {
return {
inputValue: null;
};
}
};
<\/script>
<template>
<p>No '.trim': <input type="text" v-model="inputVal1" /> "{{ inputVal1 }}"</p>
<p>With '.trim': <input type="text" v-model.trim="inputVal2" /> "{{ inputVal2 }}"</p>
</template>
<script>
export default {
data() {
return {
inputVal1: 'Hello',
inputVal2: 'Hi'
};
}
};
<\/script>
گام های عملی
- یک ورودی بساز و
v-modelبده. - در داده، مقدار متناظر را تعریف کن.
- برای کامپوننت،
modelValueو emit تنظیم کن. - در نیازهای خاص، از
.lazyو.trimکمک بگیر.
نکته: برای چند مقدار دوبل جهته، چند v-model: تعریف کن. همچنین برای مباحث نزدیک، سر بزن به v-memo و صفحه رویدادها در v-on. این لینک کلیدی ماست: دستور v-model ویو.
جمع بندی سریع
v-modelپل دوبل جهته است.- روی ورودی و کامپوننت کار می کند.
- پیش فرض ها:
modelValueوupdate:modelValue. .lazyو.trimرفتار را اصلاح می کنند.- می توان نام prop را تغییر داد.