laravel中表格内的vuejs2组件div

Posted 2023-02-23

【中文标题】laravel中表格内的vuejs2组件div

【英文标题】：vuejs2 component div inside table in laravel

【发布时间】：2020-06-17 20:24:31

【问题描述】：

你好，我正在使用 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 像表中的其他 tr 一样嵌套 非常感谢

【参考方案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,
    ,
); 

看看样本here。

对于 vue 实例，是的，您需要 div。但不适用于组件（请参阅此处的文档https://vuejs.org/v2/guide/components.html#Base-Example。

上一个答案：

由于您使用的是<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>',

如果result_from_search 是true，请再次注意<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>',

【讨论】：

这将无法将所有数据放在一个根元素中这是错误代码 [Vue 警告]：错误编译模板：组件模板应仅包含一个根元素。如果您在多个元素上使用 v-if，请改用 v-else-if 链接它们。

我明白了，那么我认为你应该尝试制作表格组件。不是 tr 组件。因为 tr 在表内。不像其他喜欢 p、br、h1 或 div。