Javascript、Vue JS値を表示

Question

初心者ここに
Vue jsを使用してデータを表示する際に問題が発生しています。

私は3つの配列を持っています。
I [0]

アレイの例では、アレイ1の値を表示したい[0]とアレイ2の値よりも[0]、アレイ3の値よりなる：

tableDataSlackStart [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"] 
tableDataCurrentTurning [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"] 
tableDataSlackStop [ "2017-10-24T03:15:36Z", "2017-10-24T09:13:44Z", "2017-10-24T15:41:27Z"] 

表示日付

<div class="stuff"> 
     <div class="start">{{tableDataSlackStart}}</div> 
     <div class="turn">{{tableDataCurrentTurning}}</div> 
     <div class="stop">{{tableDataSlackStop}}</div> 
</div> 

を

現時点では、各divに完全な配列があります。

このようなデータを表示します。

<div class="stuff"> 
     <div class="start">{{tableDataSlackStart[0]}}</div> 
     <div class="turn">{{tableDataCurrentTurning[0]}}</div> 
     <div class="stop">{{tableDataSlackStop[0]}}</div> 
</div> 
<div class="stuff"> 
     <div class="start">{{tableDataSlackStart[1]}}</div> 
     <div class="turn">{{tableDataCurrentTurning[1]}}</div> 
     <div class="stop">{{tableDataSlackStop[1]}}</div> 
</div> 

コードを複製せずに達成する方法がわかりません。

ご協力いただければ幸いです。

Answer 1

このために、私は異なる方法でデータをフォーマットします：

tableData: [{ 
     slackStart: '', 
     currentTurning: '', 
     slackStop: '' 
    }, { 
     slackStart: '', 
     currentTurning: '', 
     slackStop: '' 
    }, { 
     slackStart: '', 
     currentTurning: '', 
     slackStop: '' 
    }] 

は、データをフォーマットするために、配列がある場合にのみ正しく動作します。この

tableData = tableDataSlackStart.map(function (value, key) { 
    return { 
     slackStart: value, 
     currentTurning: tableDataCurrentTurning[key] || "no Data", 
     slackStop: tableDataSlackStop[key] || "no Data" 
    }; 
}); 

このような何かを行うことができ、すべての同じ長さであり、SlackStartは最も多くのエントリを持つ。

これはそうのような何かをすることができますでしょう：

<div v-for="data in tableData"> 
    <div class="start">{{ data.slackStart }}</div> 
    <div class="turn">{{ data.currentTurning }}</div> 
    <div class="stop">{{ data.slackStop }}</div> 
</div> 

あなたはVueのを使用している方法についての詳細な情報を提供できる場合、私はより多くの指針を与えることができます。