Vue.js v-component 在桌子上

Posted 2023-02-23

【中文标题】Vue.js v-component 在桌子上

【英文标题】：Vue.js v-component on table

【发布时间】：2015-09-23 12:39:15

【问题描述】：

在 Vue.js 文档中，他们说在表格中使用组件时必须使用 v-component 而不是直接的 component-tag。但这不起作用： 您是否有任何解决方法 - 即使是 CSS 格式 - 或修复？

@extends('app')

@section('content')
    <div class="table-responsive" id="vueTable">
        <table class="table-striped">
            <thead>
                <td class="table-cell"><strong>Aktion</strong></td>
            </thead>
            <tr v-component="members" class="success" v-repeat="members" inline-template>
                <td>@ $data | json </td>
            </tr>
        </table>
    </div>
@endsection

@section('footer')
    <script src="/js/vue.js"></script>
    <script>
        var v = new Vue(
            el: '#vueTable',
            data: 
                members: [
                    prename: 'Deniz',
                    lastname: 'Adanc'
                ]
            ,
            components: 
                members: 
                    template: ''
                
            
        );
    </script>
@endsection

【问题讨论】：

如果您使用的是内联模板，您不需要从成员组件定义中删除模板属性吗？另外，你能在 jsfiddle 中重现这个问题吗？

【参考方案1】：

Evan 再次在 1.0 中进行了重大更改。经过多次失败的尝试后，这是 html/javascript 的组合，当我尝试在表中包含自定义组件（这又是另一个父组件）时，它对我有用：

HTML 文件：

    <script id="comments-template" type="text/x-template">    
        <table>
            <tbody>
                <tr is="my-comment" :data="comment" v-for="comment in comments">
                </tr>
            </tbody>
        </table>
    </script>

    <script id="comment-template" type="text/x-template">
        <tr>
            <td>comment</td>
        </tr>
    </script>

JavaScript sn-p:

    Vue.component('my-comment', 
        template: '#comment-template',
        props: [
            'data',        
        ],
        data: function() 
            return    
                comment: '',
            ;
        ,
        ready: function()         
            this.comment = this.data.comment;
        
        ...
    );

    Vue.component('my-comments', 
        template: '#comments-template'
        ...
    );

这里有两个组件：my-comments（表）和my-comment（表中的一行/行）。来自v-for 循环的comment 作为data 属性传递，并在my-comment 内部重新映射到my-comment (this.comment = this.data.comment) 的实际数据。

它看起来相当丑陋且不完全直观，但至少它有效。

【参考方案2】：

我一直在努力修复这个问题，直到我意识到我没有安装最新的 Vue.js。

很高兴，这个问题被发现是一个bug，并且在 Vue.js 的 12.6 版本中得到了修复

你可以下载最新的here 或者直接去 vuejs.org

【讨论】：

我想问题出在 Vuejs 1.0.0

我想这将保证一个新问题提到1.0.0