Javascript, Vue JS 값 표시

초보자
Vue js를 사용하여 데이터를 표시하는 데 문제가 있습니다.
Javascript, Vue JS 값 표시

3 개의 어레이가 있습니다.
I는 배열을 표시하는 1 개 [0] 값 어레이 (2)의 값보다 [0] 어레이 (3)의 값보다 [0]

배열 예 싶습니다

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>

나는 코드를 복제하지 않고 그것을 달성하는 방법을 모른다.

도움을 주시면 감사하겠습니다.

출처

2017-10-26 charm Geld

Vue는 어떻게 사용합니까? –

라이브 데모를 공유 하시겠습니까? – C2486

이를 위해, 나는 다르게 데이터를 포맷 것이다 :

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>

, 좀 더 지침을 제공 할 수 있습니다.

출처

2017-10-26 16:01:28

tableData에서 배열을 어떻게 추가했는지 예를 들어 주시겠습니까? 나는 전에 이것에 많은 문제가 있었다. –

@charmGeld 의견을 내기 전에 겉으로보기에 그것을 추가했습니다! 행운을 빕니다! –

Javascript, Vue JS 값 표시

답변

관련 문제