Vuejs의 배열 내의 배열

Question

값 중 하나가 다른 배열이고 부모를 통해 반복하는 데이터 집합이 있지만 다른 배열이있는 요소에 도달하면 표시 할 수없는 것처럼 보입니다 . 다음은 내 코드의 관련 부분입니다.

테이블을 만들 때 열을 반복하면서 열에 정렬 기능이 있습니다. 이상 적으로 요소 열 정렬을 원하지 않습니다. 항목이 아닌 값의 배열 인 열을 제외하고는 출력이 잘됩니다. 나는 그 요소들에 대해 v-for를 사용하여 원하는 방식으로 형식을 지정할 수 있습니다. Tablefilter는 파일 이름별로 데이터를 정렬하는 계산 된 속성입니다.

<table id="assets"> 
     <thead> 
     <tr> 
      <th v-for="(head, key) in columns" v-on:click="sort(key)" v-bind:class="{active: sortkey == key}" nowrap> 
       ${head['displayname']} 
       <span v-bind:class="['arrow', sortorders[key] > 0 ? 'asc' : 'dsc']"></span> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr v-for="item in tableFilter"> 
      <td v-for="(head, key) in columns"> 
       <span v-if="head.displayname != 'Elements'">${item[key]}</span> 
       <span v-else> 


        //This is where I need help 
        <br v-for="element in item[key]"> 
         ${element} 
        </br> 


       </span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 

여기가 제 데이터 섹션입니다. 내 계산에 영향을 미치지 않아야하므로 계산과 방법을 생략했습니다.

var vm = new Vue({ 
     el: '#assets', 
    delimiters: ['${', '}'], 
    data: { 
     sections: [ 
      { 
       id: 1378, 
       filename: 'test.DOC', 
       kind: 'word', 
       size: '18182', 
       elements: [ 
        { 
         elementId: 1393, 
         title: 'Test title', 
         mls: 'November 2016: abc123', 
         owner: 'John Doe', 
         expires: '2017-11-01 05:00:00' 
        }, 
       ] 
      }, 
      { 
       id: 1383, 
       filename: 'test.pdf', 
       kind: 'pdf', 
       size: '934406', 
       elements: [ 
        { 
         elementId: 1389, 
         title: 'test title 2', 
         mls: 'July 2017; 123', 
         owner: 'Jane Doe', 
         expires: '2018-07-01 05:00:00' 
        }, { 
         elementId: 1390, 
         title: 'test title 3', 
         mls: 'July 2018; 456', 
         owner: 'Jack Doe', 
         expires: '2018-07-01 06:00:00' 
        } 
       ] 
      } 
     ] 
    }, 
      columns: { 
       id : { 
        displayname : "Id" 
       }, 
       filename : { 
        displayname : "File Name" 
       }, 
       kind : { 
        displayname : "Kind" 
       }, 
       size : { 
        displayname: "Size" 
       }, 
       elements : { 
        displayname: "Elements" 
       } 
      }, 
}) 

--- 업데이트 --- 나는 다음과 같은 코드를 넣어 경우는 모든 요소를 ​​표시합니다 .

하지만 출력하려고하면 elem 선언되지 않은 오류가 발생합니다.

<br v-for="elem in item[key]"> 
         ${elem} 
        </br> 

Answer 1

어쩌면 전 완전히 틀렸지 만 어째서 <br>에서 v-for를 사용합니까?

시도는 <div>하여 대체 :

<div v-for="elem in item[key]" :key="item.id"> 
    ${elem} 
</div>