Vue.js laravel中表内的vuejs2组件div

嗨，我正在使用vuejs2，这是我的html代码

<table border='5'>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td>text</td>
    </tr>
    @include('treats.search_and_select')
</table>

到目前为止，一切都很好，除了一件事，那就是桌子没有按tr td订购 这张照片将会出现 这是检查元素 如何修复此问题，使来自组件的收入tr与表中的其他tr一样嵌套

---

非常感谢更新：

对于vue实例，您需要将其放在分隔的

div

上，而不是放在表本身中。将您的桌子放在里面，如下所示：

<div id="app">   <!-- #app important -->
    <table border='5'>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        <tr>
            <td>text</td>
            <td>text</td>
        </tr>
        @include('treats.search_and_select')
    </table>
</div>

template: 
       '<tr>'+
            '<td class="o_td_label"><label class="o_form_label oe_form_box_warning">{{search_title}}</label></td>'+
            "<td><input type='text' @keyup='search_for_new_data()' /></td>"+
        '</tr>'+
        '<div v-if="result_from_search">'+
            '<tr v-for="result in results">'+
                '<td @click="test()">{{result.id}}</td>'+
                '<td>{{result.title}}</td>'+
            '</tr>'+
        '</div>',

看一看样品

例如，对于vue，是的，您需要在

div

。但不适用于组件（请参见此处的文档）

先前的答案：

由于您使用的是

：

<tr is='search' :datas='datas' :search_title='"{{trans("language.".$search_and_select)}}"' class='user_search_and_select'>

---

如果要将所有数据放在一个根元素中，这将不起作用。这是错误代码[Vue warn]：编译模板时出错：组件模板应仅包含一个根元素。如果您在多个元素上使用v-If，请使用v-else-If来链接它们。我明白了，那么我认为您应该尝试创建表组件，而不是tr组件。因为tr位于表内。与其他元素（如p、br、h1或div）不同。

new Vue({
    el:'#app',  // bind To div#app
    components: {
        'search' : TrTable    // put your 'search' components here //
    },
    data:{
        datas:[
            {name:'awad',id:1},
            {name:'ghassan',id:2}
        ],
        search_title:null,
    },
}); 

<tr is='search' :datas='datas' :search_title='"{{trans("language.".$search_and_select)}}"' class='user_search_and_select'>

template: 
       '<tr>'+
            '<td class="o_td_label"><label class="o_form_label oe_form_box_warning">{{search_title}}</label></td>'+
            "<td><input type='text' @keyup='search_for_new_data()' /></td>"+
        '</tr>'+
        '<div v-if="result_from_search">'+
            '<tr v-for="result in results">'+
                '<td @click="test()">{{result.id}}</td>'+
                '<td>{{result.title}}</td>'+
            '</tr>'+
        '</div>',

'<div v-if="result_from_search">'+
   '<tr v-for="result in results">'+
       '<td @click="test()">{{result.id}}</td>'+
       '<td>{{result.title}}</td>'+
    '</tr>'+
 '</div>',