از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
زمان لازم برای مطالعه: 2 دقیقه
تمرکز خواهیم کرد روی روش اتصال Vue به منوی کشویی و دریافت مقدار انتخاب شده از منوی کشویی.
برای شروع، در قالب Vue، اجازه دهید فرمی بسازیم که حاوی یک منوی کشویی برای پیدا کردن باشگاه فوتبالی است که کاربر از آن پشتیبانی می کند:
<template>
<div class="form-control">
<label for="club">Which football club do you support?</label>
<select name="club" id="club">
<option value="acmilan">AC Milan</option>
<option value="liverpool">Liverpool</option>
<option value="arsenal">Arsenal</option>
<option value="chelsea">Chlesea</option>
<option value="barcelona">Barcelona</option>
<option value="realmadrid">Real Madrid</option>
</select>
</div>
</template>
برای دستیابی به مقدار انتخابی یک منوی کشویی در Vue، از مزایای استفاده از آن بهره خواهیم برد v-model، که امکان اتصال دو طرفه را فراهم می کند. با اتصال دو طرفه، ما نه تنها می‌توانیم به مقداری که کاربر از فهرست کشویی انتخاب می‌کند گوش دهیم، بلکه می‌توانیم مقداری را که کاربر قبلاً انتخاب کرده بود، لغو کنیم.
در پروژه Vue خود، ابتدا چند ویژگی داده را در شیء پیکربندی کامپوننت اضافه کنید.
از آنجایی که مقدار مورد کشویی یک رشته است، مطمئن شوید که آن را به یک رشته خالی به عنوان مقدار اولیه آن مقداردهی اولیه کنید. اکنون می‌توانیم منوی کشویی را به داده‌ها متصل کنیم:
data() {
return {
club: "",
};
},
با این است club ویژگی داده ای که به روز رسانی ها را به منوی کشویی انتخاب می کنیم. به طوری که داده‌های ما می‌توانند هر انتخابی را که کاربر از منوی کشویی انجام می‌دهد شناسایی کند و به‌طور خودکار مقدار فهرست کشویی را با استفاده از آن به‌روزرسانی کند. v-model.
بعد، a را اضافه می کنیم v-model به منوی کشویی، با مقداری برابر با ویژگی داده ای که در ابتدا تنظیم کردیم – club. با این در جای خود، مقادیر مختلف تنظیم شده است روی گزینه های کشویی در آن ذخیره می شود club، هر زمان که کاربر گزینه دیگری را از منوی کشویی انتخاب کرد:
<template>
<div class="form-control">
<label for="club">Which football club do you support?</label>
<select name="club" id="club" v-model="club">
<option value="acmilan">AC Milan</option>
<option value="liverpool">Liverpool</option>
<option value="arsenal">Arsenal</option>
<option value="chelsea">Chlesea</option>
<option value="barcelona">Barcelona</option>
<option value="realmadrid">Real Madrid</option>
</select>
</div>
</template>
از آنجایی که ما با یک کشویی سروکار داریم، اغلب ایده آل نیست که با یک مقدار خالی برای ویژگی داده ای که به منوی کشویی متصل می شود، شروع کنیم. در آن صورت، می‌توانیم با یک انتخاب پیش‌فرض شروع کنیم، و برای انجام این کار، می‌توانیم نگاهی به مقادیری که در پشت صحنه ذخیره می‌شوند داشته باشیم و نمونه‌سازی کنیم. club دارایی به هر مقدار گزینه دلخواه شما:
data() {
return {
club: "aresnal",
};
},
اکنون، خواهید دید که “arsenal” در ابتدا از قبل انتخاب شده است روی منوی کشویی، زمانی که page ارائه شده است روی صفحه نمایش شما
اجازه دهید از درون یابی رشته ای برای ارائه استفاده کنیم club به DOM:
<template>
<!--string interpolation to render the club to the DOM -->
<h3>{{ club }}</h3>
<div class="form-control">
<label for="club">Which football club do you support?</label>
<select name="club" id="club" v-model="club">
<option value="acmilan">AC Milan</option>
<option value="liverpool">Liverpool</option>
<option value="arsenal">Arsenal</option>
<option value="chelsea">Chlesea</option>
<option value="barcelona">Barcelona</option>
<option value="realmadrid">Real Madrid</option>
</select>
</div>
</template>
خواهید دید که هر بار که کاربر گزینه کشویی دیگری را انتخاب می کند، تغییر می کند.
به همین راحتی می توان مقدار انتخاب شده یک منوی کشویی را در Vue دریافت کرد.
منتشر شده در 1403-01-04 20:17:04
