表上的Vue.js v-component [英] Vue.js v-component on table

问题描述

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

In the Vue.js Docs, they say you have to use v-component instead of the direct component-tag when using a component in a table. But this doesn't work: Do you have any workaround - even with CSS formatting - or fix?

@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

推荐答案

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

Evan made breaking changes in 1.0 again. After many failed attempts this is the combination of html/javascript that works for me when trying to include custom component in a table (which in turn is another parent component):

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代码段：

JavaScript snippet:

    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 循环作为数据传递属性并在 my-comment 中重新映射到 my-comment 的实际数据（这个。 comment = this.data.comment ）。

There are two components here: my-comments (which is a table) and my-comment (which is a row/rows in the table). comment from v-for loop is passed as a data property and remapped inside my-comment to the actual data of my-comment (this.comment = this.data.comment).

它看起来相当丑陋而且不完全直观，但至少它起作用。

It looks rather ugly and not completely intuitive but at least it works.

这篇关于表上的Vue.js v-component的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！