vuejs2 component div inside table in laravel

Question

hi im using vuejs2 and this is my html code

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

and in treats.search_and_select i did this code

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

</tr>
@section('js')
<script>
Vue.component('search',{
    template:
    '<div>'+
        '<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>',
    data:function(){
        return {
            result_from_search:false,
            results:null,
        }
    },
    methods:{
        search_for_new_data()
        {
            axios
            .get('https://jsonplaceholder.typicode.com/posts')
            .then(response => 
            (
                this.result_from_search = true,
                this.results = response['data']
            )
            )
            .catch(error => console.log(error))
        },
        test()
        {
            alert("ADSf");
        }
    },
    props:{
        'datas':{},
        'search_title':null,
    }
});
new Vue({
    el:'.user_search_and_select',
    data:{
        datas:[
            {name:'awad',id:1},
            {name:'ghassan',id:2}
        ],
        search_title:null,
    },
});
</script>
@endsection

till now everything working so good except one thing thats the table is not ordered as tr td and this the image will come and this is the inspect elements how can i fix this to make the income tr from component nested like others tr in table thanks a lot

Answer 1

Update :

For vue instance you need to put it on separated div, not in the table itself. Put your table inside it Like this :

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

Your component :

var TrTable = Vue.component('search',{
   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>'+
....

Init Vue instance :

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,
    },
}); 

Take a look a sample here.

For vue instance, yes you need at a div. But not for component ( see docs here https://v2.vuejs.org/v2/guide/components.html#Base-Example.

Previous Answer :

Since you are using <tr> :

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

Try to remove <div> from template like this :

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

Also be aware a new problem with <div> again if result_from_search is true :

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