如何传递对象数组作为对组件的支持，然后将数组成员传递作为对嵌套组件的支持？

Question

At the bottom of this post in the edits I address what I want to accomplish and what has almost worked 在这篇文章的编辑部分的底部，我阐述了我想完成的工作和几乎有效的工作

The following is my app with both the <oo-upload> and <oo-uploads> components defined above the app. 以下是我的应用程序，其中在应用程序上方定义了<oo-upload>和<oo-uploads>组件。 Essentially <oo-uploads> displays a table of <oo-upload> components to build a file uploading plugin for my app. 本质上， <oo-uploads>显示一个<oo-upload>组件表，以为我的应用构建文件上传插件。 The uploads variable is a list of all uploads, and upload defines each individual upload. uploads变量是所有上载的列表，上upload定义每个单独的上载。

<body>

    <script type="x/template" id="oo-upload-template">
        <td>@{{ upload.file.name }}</td>
        <td>@{{ upload.file.size }}</td>
        <td>
            <div class="ui indicating progress floated" v-progress="upload.progress">
                <div class="bar"><div class="progress"></div></div>
            </div>
        </td>
        <td>
            <button class="ui primary button" v-on:click="upload" v-if="status < 1">Upload</button>
            <button class="ui red button" v-on:click="destroy" v-if="status == 2">Delete</button>
        </td>
    </script>

    <script type="x/template" id="oo-uploads-template">
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th class="two wide">Filename</th>
                    <th class="two wide">Filesize</th>
                    <th class="ten wide">Status</th>
                    <th class="two wide">Actions</th>
                </tr>
            </thead>

            <tbody>
                <tr v-show="uploads.length==0">
                    <td colspan="4" class="ui center aligned">No files added!</td>
                </tr>
                <tr v-for="upload in uploads">
                    <oo-upload :upload="upload"></oo-upload>
                </tr>
            </tbody>

            <tfoot class="full-width">
                <tr>
                    <th colspan="4">
                        <div class="ui right floated small green labeled icon button" v-on:click="uploadDialog">
                            <i class="plus icon"></i> Upload File
                            <input type="file" style="display:none;" v-el:uploader v-on:change="addFiles" multiple>
                        </div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </script>

    <div id="app">
        <div class="ui container">
            <oo-uploads :uploads="uploads"></oo-uploads>
        </div>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>

The issue is that an objUpload object is not being passed to each instance of the <oo-upload> component. 问题是没有将objUpload对象传递给<oo-upload>组件的每个实例。 Instead the Vue debugger says that the component is being passed a function, not an object. 而是Vue调试器说组件正在传递一个函数，而不是对象。 <oo-uploads> is not having any issues receiving uploads as a prop. <oo-uploads>在接收uploads作为道具时没有任何问题。

var Vue = require('vue'),
    VueRouter = require('vue-router'),
    VueResource = require('vue-resource'),
    Vuex = require('vuex'),
    VueValidator = require('vue-validator');

/*
PLUGINS
 */

Vue.use(VueResource);

/*
CUSTOM DIRECTIVES
 */

Vue.directive('progress', {
    bind: function () {
        $(this.el).progress();
    },
    update: function (value) {
        $(this.el).progress('set percent', value);
    }
});

/*
OBJECTS
 */

function objUpload (file) {
    this.progress = 0;
    this.file = file;
    this.status = 0;
}

/*
COMPONENTS
 */

Vue.component('oo-upload', {
    props: ['upload'],
    template: '#oo-upload-template',
    methods: {
        upload: function () {
            this.upload.status = 1;
            this.$http.post('/upload', this.upload.file, { progress: function (pe) {
                this.progress = Math.floor(pe.loaded/pe.total * 100);
            }}).then(function (result) {
                this.upload.status = 2;
            }, function (result) {
                this.upload.status = -1;
            })
        },
        destroy: function () {

        }
    }
});

Vue.component('oo-uploads', {
    props: ['uploads'],
    template: '#oo-uploads-template',
    methods: {
        uploadDialog: function () {
            $(this.$els.uploader).click();
        },
        addFiles: function () {
            var uploader = this.$els.uploader;
            for (var i = 0; i < uploader.files.length; i++) {
                var file = uploader.files[i];
                this.uploads.push(new objUpload(file));
            }
        }
    }
})

/*
CONSTANTS
 */

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="_token"]').attr('content');

/*
INSTANCE
 */

var vm = new Vue({
    el: '#app',
    data: {
        uploads: [],
    },
});

EDIT: If I pass the uploads array directly to a single instance of <oo-upload> within <oo-uploads> , it passes the full array down just fine, but for some reason it won't iterate through the array and pass just the objUpload objects. 编辑：如果我将上uploads数组直接传递到<oo-uploads>的<oo-upload>的单个实例，它将向下传递完整的数组，但是由于某种原因，它不会遍历该数组并仅传递objUpload对象。

EDIT2: Essentially what I want to do is limit the scope of the data I pass down to only what is necessary for that component. EDIT2：本质上，我想做的就是将我传递的数据范围限制为仅对该组件必需的数据。 I want the upload component acting only on the upload assigned to it. 我希望上传组件仅对分配给它的上传起作用。 I recognize that my practice may be poor or that my implementation may not be possible, I just need a pointer as to how to accomplish something similar. 我认识到我的实践可能很差，或者我的实现可能无法实现，我只需要有关如何完成类似任务的指导。

Answer 1

According to Vue.js documentation 根据Vue.js文档

It is therefore recommended to always have a single root-level, plain element in templates. 因此，建议模板中始终包含单个根级别的普通元素。

Try to wrap oo-upload-template with tr and change 尝试用tr包装oo-upload-template并进行更改

<tr v-for="upload in uploads">
  <oo-upload :upload="upload"></oo-upload>
</tr>

to 至

<tr is="oo-upload" v-for="upload in uploads" :upload="upload"></tr>

Example fixed fiddle 固定小提琴示例

如何传递对象数组作为对组件的支持，然后将数组成员传递作为对嵌套组件的支持？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-12 12:37:15

如何传递对象数组作为对组件的支持，然后将数组成员传递作为对嵌套组件的支持？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-12 12:37:15

解决方案1
0 已采纳 2016-08-12 12:37:15