پر كردن منو دوم  بر اساس منو اول

در مدل ويو (Vue) خاصيت مراقب (Watch) ديده شده است كه وظيفه آن  نظارت بر روي متغييري يا شي است كه به آن داده شده و با تغيير مقدار اين متغيير يا شي  تابع داخلي اجرا و خروجي بر گردانيده مي شود

4_2018_04_26_12_53_37.jpeg

سناريو

در كد دو منو داريم كه اولي را پر مي كنيد و با تغيير مقدار انتخابي در منو اول اقدام به تغيير محتواي منوي دوم مي كنيم

ابتدا بلوك كد گرافيكي را مي نويسيم


<template>
  <v-container>
      <v-flex xs12 sm6 md4 style="direction:rtl;">
        <v-select
         label="select"
         :items="arrs1"
         v-model="select01"
         item-text="name"
         item-key="value"
         append-icon=""
       ></v-select>
     </v-flex>
     <v-flex xs12 sm6 md4 style="direction:rtl;">
      <v-select
       label="select"
       :items="arrs3"
       v-model="select02"
       item-text="name"
       item-key="value"
       append-icon=""
     ></v-select>
   </v-flex>
  </v-container>
</template>

اكنون به بلوك كد دستورات مي رسيم. ابتدا مقادير داده را تعريف مي كنيم

select01: 1,

select02: 1

سپس آرايه اول را تكميل مي كنيم

arrs1: [

{name: 'name1', value: '1'},

{name: 'name2', value: '2'},

{name: 'name3', value: '3'}

]

بعد آرايه دوم را آماده مي كنيم

arrs2: [

{name: 'name1 - 1', value: '11', idType: 1},

{name: 'name1 - 2', value: '12', idType: 1},

{name: 'name1 - 3', value: '13', idType: 1},

{name: 'name2 - 1', value: '21', idType: 2},

{name: 'name2 - 2', value: '22', idType: 2},

{name: 'name2 - 3', value: '23', idType: 2},

{name: 'name3 - 1', value: '31', idType: 3},

{name: 'name3 - 2', value: '32', idType: 3},

{name: 'name3 - 3', value: '33', idType: 3}

],

و آرايه سوم را بدون مقدار معرفي مي كنيم

 arrs3: []

بخش اصلي كد همان تابع مراقبت است، خيلي آسان كد را مي نويسيم

watch: {

select01 (val) {

console.log(val)

this.arrs3 = this.arrs2.filter(x => x.idType - val === 0)

console.log(this.arrs3)

}

}

در نوشتن فيلتر از روش (ES6) استفاده كرديد كه مزاياي خوبي دارد

تصور نمي كنم كد پيچيده باشد

توصيف فرايند

الف) زمانيكه منو اول تغيير داده مي شود، مقدار مدل () عوض مي شود

ب) مراقب متوجه اين تغيير مي شود

پ) تابع مربوطه اجرا و آرايه سوم كه تهي بود پر مي شود

ت) از اينجا به بعد ويو به واسطه پيوستگي اطلاعاتي وارد مي شود و منوي دوم را پر مي كند

اين كد تست شده است