Vue.js v-for 增加循环组件中的一些变量

Question

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

活动有一个 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 组件中，我用 v-for:

加载 agendas

<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...我想显示事件 1 的时间 14:00，事件 [=] 的 14:10 24=]、14:25 事件 3 和 14:50 事件 4。

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

Answer 1

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;
    },
  },
});

我已经制作了一个 quick CodePen 作为基本示例来展示它的实际效果，但您需要更新实际代码以补偿多天的时间。

Answer 2

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

下面的代码添加了一个计算属性（基于 event.agendas），returns 一个新的议程对象数组，每个对象都添加了一个 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 computed 属性用于 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>

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

Vue.js v-for 增加循环组件中的一些变量

Vue.js v-for increment some variable in looped component

javascript

vue.js

v-for