複数のテーブル行を返すVueコンポーネント

Question

Vue.jsの新機能ですので、私と一緒にお立ち寄りください。私は1つのコンポーネントから2つのtr要素を返そうとしていますv-design-row。私はvueがテンプレート要素をdivにラップする必要があることを知っていますが、HTML構造体のテーブル構造のためにdivでラップすることはできません。 2番目のtrをv-design-rowコンポーネントに追加すると、vueは何も表示しません。

誰でもこれを達成するための最良の方法を提案できますか？

main.vue

<table class="table"> 
     <thead> 
      <th>Image</th> 
      <th>Name</th> 
      <th>Description</th> 
      <th>Status</th> 
      <th>Order</th> 
      <th>Edit</th> 
      <th>Delete</th> 
     </thead> 
     <tbody v-for="catagory in catagories"> 
      <v-catagory-row :catagory="catagory"></v-catagory-row> 
      <v-design-row v-for="design in catagory.designs" :design="design"></v-design-row> 
     </tbody> 
    </table> 

V-デザインrow.vue

<template> 
<tr> 
    <td><img :src="design.image_directory" :alt="design.name"></td> 
    <td>{{ design.name }}</td> 
    <td> 
     <button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier"> 
      <i class="fa fa-plus" aria-hidden="true"></i> Show 
     </button> 
    </td> 
    <td> 
     <div class="switch"> 
      <input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox"> 
      <label :for="'active'+design.id"></label> 
     </div> 
    </td> 
    <td> 
     <button class="btn btn-secondary" type="button"> 
      <i class="fa fa-caret-up" aria-hidden="true"></i> 
     </button> 
     <button class="btn btn-secondary" type="button"> 
      <i class="fa fa-caret-down" aria-hidden="true"></i> 
     </button> 
     {{ design.sort_order }} 
    </td> 
    <td> 
     <button class="btn btn-secondary" type="button"> 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
     </button> 
    </td> 
    <td> 
     <button class="btn btn-secondary" type="button"> 
      <i class="fa fa-trash" aria-hidden="true"></i> 
     </button> 
    </td> 
</tr> 
<tr> 
    <td class="p-0" colspan="7"> 
     <div class="collapse" :id="design.identifier"> 
      <div class="p-3"> 
       {{ design.description }} 
      </div> 
     </div> 
    </td> 
</tr> 
</template> 

Answer 1

あなたv-design-rowにおける第二trは、設計の記述を含んでいるので、私は、これは全体の要素であることを示唆していると、それだろう1つの行を占有し、独自のレイアウトを持つ必要があります。

また、説明を別にして、他のすべてのデータをコンポーネントに含めることもできます。また

、声明

VUEは全く正しくないテンプレート要素はdiv要素

に包まれている必要があります。テンプレートは単一の要素である間に任意のルート要素を持つことができます。だから私は、私はあなたがになってものを見ると思います

<template> 
    <tr> 
    </tr> 
</template> 

あるいは

<template> 
    <tr v-if="condition == 1"> 
    </tr> 
    <tr v-else-if="condition == 2"> 
    </tr> 
    <tr v-else> 
    </tr> 
</template>