0
は私が達成したいと何がほとんどコンポーネントの小道具としてオブジェクトの配列を渡し、配列のメンバーを小道具としてネストされたコンポーネントに渡すにはどうすればよいですか？編集中にこの記事の下部に
アプリ上で定義された<oo-upload>と<oo-uploads>コンポーネントの両方に私のアプリで、次のを働いたもの取り組みます。基本的には<oo-uploads>は、<oo-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>
問題がobjUploadオブジェクトが<oo-upload>コンポーネントの各インスタンスに渡されないことです。その代わりに、Vueデバッガは、コンポーネントがオブジェクトではなく関数を渡されていることを示します。 <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: [],
},
});
編集：私は<oo-uploads>内<oo-upload>の単一のインスタンスに直接uploads配列を渡すと、それだけで罰金完全な配列を下に渡しますが、何らかの理由でそれが配列を反復処理し、ちょうど渡しませんobjUploadオブジェクト。
EDIT2：基本的には、渡すデータの範囲を、そのコンポーネントに必要なものだけに限定します。私はアップロードコンポーネントが割り当てられたアップロードでのみ動作するようにしたい。私の練習が貧弱であるか、私の実装が不可能かもしれないことを認識しています。私は似たようなことを達成するためのポインタが必要です。
に
を変更しよう行？ – gopher
おかげさまで、恐ろしい表のケースを忘れました... [docs]（http://vuejs.org/guide/components.html#Template-Parsing）_tableに記載されているように、thead、tbody、tfoot、trのみが含まれています。これらの要素は、_カスタムタグが吊り下げられて正しくレンダリングされないため、table_の直接の子要素である必要があります。私は 'is'を使用する答えを更新しました – pkawiak
あなたが提案したすべての変更を行いましたが、' upload'を壊してそのプロパティを個別に '