Vue - 모델링 배열 변경

두 개의 배열 (더미/자리 표시 자 대 실제 데이터)이있는 객체로 구성된 간단한 Vue 템플릿이 있습니다. 우선 Vue - 모델링 배열 변경

<td v-for="(item, key, index) in tableColumns"> 
    <span v-if="item.csvValues.length == 0" v-for="dummyValue in item.dummyValues"> 
     {{dummyValue}} <br /> 
    </span> 
    <span v-else v-for="value in item.csvValues"> 
     {{value}} <br /> 
    </span> 

</td>

data() { 
    var tableColumns = new Array(); 
    tableColumns.push({"dummyValues": ["date 1", "date 2"], "csvValues": []}); 

    var variables = { 
    "tableColumns": tableColumns 
    }; 

    return variables; 
}

는 I은 더미 값을 갖는다. 길을 따라 뭔가 (CSV 파일을 파싱합니다.) 그리고 실제 값으로 렌더링 한 더미 데이터를 교환해야합니다. 그래서 실제 데이터 배열 ( csvValues)에 내 실제 데이터를 추가하고 v-else이 처리하도록하겠습니다.

이것은 작동하지 않습니다. 왜 내 접근 방식이 잘못 되었습니까?

출처

2017-05-02 Buffalo

가 ['Vue.set'] 사용해보십시오 반복 # Vue-set) – Phil

데이터 부분의 구문/사용이 이상하게 보입니다. 여기에 로직을 정의하지 마십시오. 다음과 같이 tableColumns를 정의하십시오. tableColomns : [], 다음으로 'push'부분을 메소드로 이동하고, 예를 들어 마운트 된 부분을 호출하십시오. –

@ M.Suurland 내 data() 메서드에 논리가 없으면 일반 배열을 반환합니다. 문제는 초기 데이터를 표시하는 것이 아니라 나중에 모델을 수정하는 것입니다. 변경 사항은 반영되지 않습니다. Chrome 또는 Vue 확장 프로그램을 사용하여 디버깅 할 때 데이터를 검사 할 수 있지만 새 요소는 있지만 렌더링되지 않습니다. 나는 그들 각각에 대해 "정의되지 않은"상태가된다. – Buffalo

분명히 Vue는 두 데이터 소스 (dummyValues 및 csvValues)간에 전환 할 수 없습니다. 세 번째 요소를 사용해야했습니다. 첫 번째 요소와 두 번째 요소 중 하나를 유지합니다. 그래서, 하나 또는 다른 배열에서 내보기를 구축하는 대신, 내 세 번째 배열 (renderingValues)에 물건을 올려 놓거나 푸시하고 항상 그 중 하나를 반복합니다.

dummyValues을 렌더링 하시겠습니까?
- 팝 모든 (이전 csvValues) renderingValues
에서 - dummyValues에서 renderingValues
모든 것을 밀어 - https://vuejs.org/v2/api/ (renderingValues

출처

2017-05-02 14:21:30 Buffalo

Vue - 모델링 배열 변경

답변

관련 문제