Vue.js v - ループされたコンポーネントの変数を増やす

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に追加されます...私はイベント3やイベント4ため14:50ため14:25、イベント2のイベント1、14:10のための時間14:00を表示したいと思います。

Vue.js 2.0のv-forディレクティブの値をどのように増やすことができますか？

Answer 1

あなたはすでにあなたのために働く答えを得ているようですが、誰かが別の解決策を探している場合に備えてここに投稿します。受け入れられた答えは、アジェンダの初期レンダリングには良いかもしれませんが、アジェンダ配列が突然変異した場合、またはリストの再レンダリングを引き起こすものがあれば中断し始めます。開始時間の計算は、反復ごとに増分されるストアド値に基づいているためです。

以下のコードは、startプロパティが追加されたアジェンダオブジェクトの新しい配列を返す計算されたプロパティ（event.agendasに基づいて）を追加します。

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-のために使用されます。

<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が再描画されたりすると、この計算されたプロパティが再評価され、開始時刻が再設定される - 正しく計算されました。

Answer 2

Vue.jsは実際にあなたが親のスコープのメソッドに小道具値をバインドできるようになるので、最も簡単な方法は、このような何かをするようになります。

<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()は親の内のメソッドでありますスコープ：私は基本的な例としてquick CodePenを作った

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

はアクションでそれを表示していますが、複数の日を補うために、実際のコードを更新する必要があります。