vuejs2 компонент div внутри таблицы в laravel

Question

привет, я использую 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>

, а в treats.search_and_select я делал этот код

<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

до сих пор все работало так хорошо, кроме одного То, что таблица не упорядочена как TR TD, и это изображение придет , и это элементы проверки Как я могу это исправить, чтобы сделать доход tr из компонента вложенного, как и другие, попавшие в таблицу, большое спасибо

Answer 1

Обновление:

Для экземпляра 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>

Ваш компонент:

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>'+
....

Инициация Vue Экземпляр:

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

Посмотрите образец здесь .

Для vue экземпляра, да, вам нужно на div. Но не для компонента (см. Здесь документы https://vuejs.org/v2/guide/components.html#Base -Пример .

Предыдущий ответ:

Поскольку вы используете <tr>:

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

Попробуйте удалить <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>',

Также обратите внимание на новую проблему с <div> снова, если result_from_search равен 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>',