2017-10-10 6 views
0

在我的Vuex Store中,我有一个计划状态,它描述了一周的计划。如何管理Vuex Store中的嵌套数组并将其传递给组件

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 : '' 
       }] 
     }, 

     ... 

    } 
] 

要显示的一切,我有这样的事情

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从他的道具检索一天,然后渲染,但这是Vuex的一种方式吗?由于通常我们总是必须从Vuex Store获取/设置(提交)。

在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> 

我怎么能将来自PlanningDek的道具的meeting.value绑定在PlanningWeek的哪个节目中?

由于修改与承诺改变状态使这个看起来就像是这样的:

<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> 

所以我会在V-模型meetingList计算性能或者是这样的,但如何管理绑定检索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) 
    } 
} 
相关问题