vueのコンポーネントの方法

Question

index.blade

<table class="table">
          <thead class="thead-light">
              <tr>
                  <th>ID</th>
                  <th>名前</th>
                  <th>メールアドレス</th>
                  <th>メッセージ数</th>
                  <th>ユーザーの削除</th>
              </tr>
          </thead>
        <delete-table :users="{{$users}}" ></delete-table>
    </table>    

DeleteTable.vue

<template>
    <tbody>
        <tr v-for="(user,index) in usersNew" 　:key="user.id">
            <th>{{user.id}}</th>
            <th>{{user.name}}</th>
            <th>{{user.email}}</th>
            <th>{{user.messages_count}}</th>
            <th><input type="button" class="btn-outline-secondary" value="削除" @click="del(user.id,index)"></th>
        </tr>
    </tbody>
</template>

テーブル内のtbodyタグ内をコンポーネント化し、削除ボタンを押すとその行が削除されるようにしたいです。動作はするのですが画像のようにtbodyが先に読み込まれます。どうすればtable内にうまくtbodyが読み込まれるでしょうか？

Answer 1

<ul>、<ol>、<table>、<select>のようなカHTML要素ではその要素の中につく要素には制限があるのでカスタムコンポーネントでは認識されないらしいので、特別なis属性を付けたらそれを回避できました。