Vuejsの配列内の配列

Question

値の1つが別の配列であり、親をループしているデータセットがありますが、別の配列を持つ要素に到達すると表示できないようです。ここに私のコードの関連部分があります。

私はテーブルを作成しているときに私の列をループしています。私は列に並べ替え機能を持っています。理想的には、私は要素の列をソートしたくありません。私は項目だけでなく値の配列である列を除いて、出力がうまくいくようにしています。私はそれらの要素について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" 
       } 
      }, 
}) 

--- --- UPDATE 私は、次のコードを入れた場合には、すべての要素が表示されます。

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

しかし、私がelemを出力しようとすると、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>