VueJS手風琴表 - 出現在表格外

Question

我有一張表格，使用ajax獲取數據。我試圖建立一個表，其中每行都有一個關聯的隱藏行，並單擊該行來切換隱藏行的顯示。隱藏的行包含手風琴。

問題是，手風琴已經搞亂了，並在表格的底部顯示，而不是顯示在它被點擊的特定行下面。

我的代碼如下：

<table class="table table-striped table-bordered table-hover"> 
    <thead> 
     <tr> 
     <th v-for="column in columns"> 
      <span v-if="column == 'Predictive Price'"> 
       {{column}} 
       <i class="fa fa-info-circle" v-tooltip="msg"></i> 
      </span> 
      <span v-else-if="column == 'Actual Price'"> 
       {{column}} 
      <i class="fa fa-info-circle" v-tooltip="tooltip.actual_price"></i> 
           </span> 
           <span v-else> 

           {{column}} 
           </span> 
          </th> 
          <th>Actions</th> 
         </tr> 

        </thead> 

        <tbody> 
         <tr v-for="row in model" @click="showRow"> 

          <td> 
           {{row.id}} 
          </td> 

          <td> 
           {{row.company_customer.customer_name}} 
          </td> 

          <td> 
           <i class="fa fa-map-marker"></i> 
           <small> 
           {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}} 
           </small> 
          </td> 

          <td> 
           <i class="fa fa-map-marker"></i> 
           <small> 
            {{row.pickup_addr.address_1}}, {{row.pickup_addr.city}}, {{row.pickup_addr.postcode}} 
           </small> 
          </td> 

          <td> 
           &pound;{{row.predictive_price}} 
          </td> 

          <td> 
           &pound;{{row.actual_price}} 
          </td> 

          <td> 
           n/a 
          </td> 

          <tr> 
          <td colspan="7" v-if="contentVisible"> 
            <div class="accordian-body"> 
             ACCORDION 
            </div> 
          </td> 
          </tr> 

         </tr> 



        </tbody> 
       </table> 


<script> 

export default { 

    methods: { 
     data() { 
      return { 
      msg: 'This is just an estimation!', 

      tooltip: { 
       actual_price: 'Click on the price to edit it.' 
      }, 

      contentVisible: false, 

      } 
     }, 
     rowRow() { 
      this.contentVisible = !this.contentVisible; 
     } 
    } 

} 

</script> 

我在哪裏可以把手風琴格，以便它能夠正確顯示？

編輯：

請參閱小提琴：https://jsfiddle.net/49gptnad/355/

Answer 1

這聽起來像你想與每一行相關聯的手風琴，所以真的，你要行爲您的數據的各個項目。

您可以通過將您的v-for移動到template標籤來實現這一點，該標籤包裝兩行。

此外，您需要控制內容是否在逐行基礎上可見，因此將contentVisible屬性添加到每個數據項並使用它來控制第二行是否可見。

console.clear() 
 

 
var vm = new Vue({ 
 
    el: '#vue-instance', 
 
    data: { 
 
    testing: [{ 
 
     id: 1, 
 
     name: "Customer 1", 
 
     contentVisible: false 
 

 
     }, 
 
     { 
 
     id: 2, 
 
     name: "Customer 1", 
 
     contentVisible: false 
 

 
     }, 
 
     { 
 
     id: 3, 
 
     name: "Customer 3", 
 
     contentVisible: false 
 

 
     }, 
 
    ], 
 
    columns: ["id", "name"] 
 
    }, 
 

 
    mounted() { 
 
    console.log(this.testing); 
 
    }, 
 

 
    methods: { 
 
    showRow(data) { 
 
     this.contentVisible = !this.contentVisible; 
 

 
    } 
 

 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="vue-instance"> 
 
    <table class="table table-striped table-bordered table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th v-for="column in columns"> 
 
      {{column}} 
 
     </th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <template v-for="row in testing"> 
 
     <tr @click="row.contentVisible = !row.contentVisible"> 
 
      <td>{{row.id}}</td> 
 
      <td>{{row.name}}</td> 
 
     </tr> 
 
     <tr v-if="row.contentVisible"> 
 
      <td :colspan="columns.length" > 
 
      <div class="accordian-body"> 
 
       afasfafs 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </template> 
 
    </tbody> 
 
    </table> 
 
</div>

這裏是你的更新fiddle。