私の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でネストされた配列を管理してネストされたコンポーネントにデータを渡す最善の方法は何ですか?
お返事ありがとうございます!