vue.js (vuetify.js) sample code

ساخت منو با استفاده از ويوتيفاي در ويو جي اس

4_2018_04_26_12_53_37.jpeg

براي ساخت يك منو در فرم ورك ويو با استفاده از فرم ورك ويوتيفاي از كامپوننت مخصوص آن استفاده مي شود

<v-select></v-select>
اين كامپوننت داراي ويژگي هاي خاص خود مي باشد كه يك نمونه آن در زير آورده شده است

<v-select
:label="$t('general.selectOne')"
:items="masirs"
v-model="marisValue.value"
item-text="name"
item-key="value"
></v-select>

گزينه هاي مختلف در اين كامپوننت وجود دارد كه به ترتيب توضيح داده مي شود: 
برچسب: براي تعيين عنوان نمايشي استفاده مي شود
آيتمها: آرائه اطلاعات را به منو معرفي مي كند يك نمونه آن شبيه زير است
[
{name:'يزد', value:'1'}
{name:'شيراز', value:'2'}
{name:'هرمزگان', value:'3'}
{name:'تهران', value:'4'}
{name:'ياسوچ', value:'5'}
]
وي مدل: اين گزينه را در انتها توضيح مي دهم
آيتم تكست: از آرايه آيتمز شي مورد گزينه اي كه قرار است نام استفاده شده در منو باشد را معرفي ميكنيم.
آيتم كي: از آرايه آيتمز شي مورد نظر ، آن كزينه اي كه قرار است بعنوان كليد استفاده شود را معرفي مي كنيم
 اما وي مدل: معمولا لازم است تا منو در زمان نمايش هاي بعدي يك گزينه را بعنوان انتخاب شده پيش فرض داشته باشند
مثلا منو استانها كشور: مرتبه اول شما استان تهران را انتخاب مي كنيد. براي دفعات بعدي كه آنرا باز مي كنيد استان تهران بايد انتخاب شده باشد
براي انجام اينكار لازم است تا يك شي و مدل ديگر هم داشته باشيد و آن شي را به منو معرفي كنيد كه كليد تعريف شده در مدل با يكي از آيتمهاي آرائه آيتمز مطابقت داشته باشد. پس مدل شما بايد به اين شكل باشد
{name:'تهران', value:'4'}
به اين ترتيب كامپوننت عمل انطباق را انجام داده و استان تهران پيش فرض مي شود
مدل انتخاب شما مي تواند فقط مقدار داشته باشد:
{value:'4'}
 اما نكته مهم: در حال حاضر اين كامپوننت  يك باگ دارد و آن هم اينكه عنوان مقدار شما حتما بايد  (value) باشد در غير اين صورت نتيجه مطلوب حاصل نمي شود
قطعا در آينده نزديك اين مشكل مرتفع مي شود اما تا آن وقت اين نكته مد نظر باشد