數組在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" 
       } 
      }, 
}) 

--- 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>