5

我正在尝试显示活动议程上的项目列表。

活动start_date结束 议程上的每个项目都有一个duration以分钟为单位的时间，例如：

event:{
  start_date: '2017-03-01 14:00:00',
  agendas:[
      {id:1,duration:10},
      {id:2,duration:15},
      {id:3,duration:25},
      {id:4,duration:10}
  ]
}

现在，在我的event组件中，我加载agendas了一个v-for：

<agenda v-for="(agenda,index) in event.agendas" 
        :key="agenda.id"
        :index="index" 
        :agenda="agenda">

在agenda组件中，我想增加每个项目开始的时间：

<div class="agenda">
  //adding minutes to start_date with momentJs library
  {{ moment(event.start_date).add(agenda.duration,'m') }} //this should increment, not add to the fixed event start date
</div>

目前它只添加到固定事件start_date...我想显示14:00事件1、14:10事件2、14:25事件3和14:50事件的时间4。

如何v-for在 Vue.js 2.0 中增加指令中的值？

4

2 回答 2

3

看起来您已经得到了适合您的答案，但我会在这里发布，以防有​​人正在寻找替代解决方案。接受的答案可能对议程的初始渲染有好处，但如果议程数组发生突变或任何事情导致列表重新渲染，则将开始中断，因为开始时间计算基于每次迭代都会递增的存储值。

下面的代码添加了一个计算属性（基于event.agendas），它返回一个新的议程对象数组，每个对象都有一个添加的start属性。

Vue.component('agenda', {
  template: '<div>Agenda {{ agenda.id }} — {{ agenda.duration }} min — {{ agenda.start }}</div>',
  props: {
    agenda: Object
  }
});

new Vue({
  el: "#root",
  data: {...}, 
  computed: {
    agendas_with_start() {
      const result = [];

      let start = moment(this.event.start_date);
      for(let agenda of this.event.agendas) {
        result.push({
          id: agenda.id,
          duration: agenda.duration,
          start: start.format('HH:mm')
        });
        start = start.add(agenda.duration, 'm');
      }
      return result;
    }
  }
});

然后，在模板中，agendas_with_start在 v-for 中使用了计算属性：

<div id="root">
  <h3>Event Start: {{ event.start_date }}</h3>
  <agenda v-for="agenda in agendas_with_start" 
          :key="agenda.id"
          :agenda="agenda"></agenda>
</div>

这是一个有效的 codepen。这种方法的好处是，如果底层的议程数组发生了变异或重新排序，或者事件开始时间发生了变化，或者任何事情导致 Vue 重新渲染 DOM，这个计算属性将被重新评估，并且开始时间将被重新计算。 - 计算正确。

于 2017-03-03T17:36:03.103 回答
2

Vue.js 实际上会让你将 prop 值绑定到父范围内的方法，所以最简单的方法是执行以下操作：

<agenda class="agenda" v-for="(agenda,index) in event.agendas"
    :key="agenda.id"
    :index="index"
    :agenda="agenda"
    :start-time="get_start_time(agenda.duration)">
</agenda>

然后get_start_time()是父范围内的方法：

new Vue({
  el: '#app',
  data: {
    time_of_day: '',
    event:{
      // ...
    },
  },

  methods: {
    get_start_time(duration) {
      if (this.next_event_start === '') {
        this.next_event_start = moment(this.event.start_date);
      } 
      this.event_start = this.next_event_start.format('h:mm a');
      this.next_event_start.add(duration, 'minutes');
      return this.event_start;
    },
  },
});

我制作了一个快速 CodePen作为基本示例来展示它的实际效果，但您需要更新实际代码以弥补多天的损失。

于 2017-03-03T01:11:38.437 回答