2017-10-10 13 views
0

私のVuexストアでは、1週間の計画を記述する計画状態があります。私は彼の小道具から毎日取得し、それをレンダリングするこのVuex Storeでネストされた配列を管理し、トラフコンポーネントを渡す方法

PlanningWeek.vue

<template> 
    <div class="week columns is-desktop is-vcentered"> 
     <PlanningDay v-for="(day, index) in planning" :key="index" :day="day"></PlanningDay> 
    </div> 
</template> 

<script> 
    import PlanningDay from './PlanningDay'; 
    import { mapState } from 'vuex'; 

    export default { 
     computed : mapState(['planning']), 
     components : { 
      PlanningDay 
     }, 
    }; 
</script> 

そして、それぞれの日のために私はPlanningDay.vueを持っているようなものを持っていますが、すべてのものを表示するには

planning : [ 
     { 
      name : 'monday', 
      meetings : [ 
       { 
        name : 'morning', 
        value : '' 
       }, { 
        name : 'noon', 
        value : '' 
       }, { 
        name : 'evening', 
        value : '' 
       }] 
     }, 
     { 
      name : 'tuesday', 
      meetings : [ 
       { 
        name : 'morning', 
        value : '' 
       }, { 
        name : 'noon', 
        value : '' 
       }, { 
        name : 'evening', 
        value : '' 
       }] 
     }, 

     ... 

    } 
] 

それはVuexのようなものです。通常は、Vuex Storeからは必ず/ set(コミット)する必要があります。

Vuex Storeでネストされた配列をレンダリングするにはどうすればよいでしょうか?

あなたは

PlanningDay.vue

<template> 
    <div class="day column"> 
     <p class="name has-text-centered" v-text="day.name"></p> 

     <PlanningMeeting v-for="(meeting, index) in day.meetings" :key="index" :meeting="meeting"></PlanningMeeting> 
    </div> 
</template> 

<script> 
    import PlanningMeeting from './PlanningMeeting'; 

    export default { 
     props : ['day'], 
     components : { 
      PlanningMeeting 
     } 
    }; 
</script> 

そして最後にPlanningMeeting.vue

<template> 
    <div class="meeting"> 
     <p class="has-text-centered" v-text="meeting.name"></p> 
     <input type="text" v-model="meeting.value">  
    </div> 
</template> 

どのように私はできるかもしれないを参照するには、すべてを持っているように、私は、ネストされたコードを続行PlanningWeekからcommeするPlanningDayの小道具から来たmeeting.valueをバインドするには?

変更は状態を変更するためにコミットして作られていますので、これはこのようなもののようになります。

<script> 
    export default { 
     props : ['meeting'], 
     computed : { 
      meetingList : { 
       get() { 
        return this.$store.state.planning[planningId].meetings[meetingId]; 
       }, 
       set(value) { 
        this.$store.commit('updateValue', ...planningId, meetingId, ... value); 
       } 
      } 
     }, 
    }; 
</script> 

は、だから私はmeetingList計算プロパティまたはこのような何かが、どのように管理するとともに、V-モデルを結合しますplanningIdとmeetingIdを取得して、適切な方法で意味します。 Vuexのポイントはイベントを置くことではなく、どこにでも小道具を置いてこのデータ層を抽出することです。

私は何か間違っていますか? Vuexでネストされた配列を管理してネストされたコンポーネントにデータを渡す最善の方法は何ですか?

お返事ありがとうございます!

答えて

0

私が間違っていない場合は、入力値をvuex状態(meetings.valueオブジェクト)に保存しようとしています。

まず、入力を別のオブジェクトにバインドする必要があります。種類この方法:

data() { 
    return { 
    value: null 
    } 
} 
テンプレート]セクションで、その後

<input type="text" v-model="value"> 
<button @click="onValueSaved"></button> 

、あなたがvuex状態に保存された値にメソッドを宣言する必要があり、

methods: { 
    onValueSaved() { 
    this.$store.commit('SET_MEETING_VALUE', this.value) 
    } 
} 
関連する問題