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组件中，我加载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 中增加指令中的值？

Answer 1

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

\n\n

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

\n\n

Vue.component(\'agenda\', {\n  template: \'<div>Agenda {{ agenda.id }} \xe2\x80\x94 {{ agenda.duration }} min \xe2\x80\x94 {{ agenda.start }}</div>\',\n  props: {\n    agenda: Object\n  }\n});\n\nnew Vue({\n  el: "#root",\n  data: {...}, \n  computed: {\n    agendas_with_start() {\n      const result = [];\n\n      let start = moment(this.event.start_date);\n      for(let agenda of this.event.agendas) {\n        result.push({\n          id: agenda.id,\n          duration: agenda.duration,\n          start: start.format(\'HH:mm\')\n        });\n        start = start.add(agenda.duration, \'m\');\n      }\n      return result;\n    }\n  }\n});\n

\n\n

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

\n\n

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

\n\n

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

\n