Di bagian bawah postingan ini dalam pengeditan saya membahas apa yang ingin saya capai dan apa yang hampir berhasil
Berikut ini adalah aplikasi saya dengan komponen <oo-upload> dan <oo-uploads> yang ditentukan di atas aplikasi. Intinya <oo-uploads> menampilkan tabel <oo-upload> komponen untuk membuat plugin pengunggah file untuk aplikasi saya. Variabel uploads adalah daftar semua unggahan, dan upload mendefinisikan setiap unggahan individual.
<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>
Masalahnya adalah objek objUpload tidak diteruskan ke setiap instance komponen <oo-upload>. Sebaliknya, debugger Vue mengatakan bahwa komponen sedang meneruskan sebuah fungsi, bukan sebuah objek. <oo-uploads> tidak mengalami masalah apa pun dalam menerima uploads sebagai prop.
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: Jika saya meneruskan larik uploads secara langsung ke satu instance <oo-upload> dalam <oo-uploads>, ia meneruskan larik lengkap ke bawah dengan baik, tetapi untuk beberapa alasan ia tidak akan mengulangi larik dan hanya meneruskan objek objUpload.
EDIT2: Pada dasarnya yang ingin saya lakukan adalah membatasi cakupan data yang saya berikan hanya pada apa yang diperlukan untuk komponen itu. Saya ingin komponen unggahan hanya bertindak pada unggahan yang ditugaskan padanya. Saya menyadari bahwa praktik saya mungkin buruk atau penerapan saya mungkin tidak dapat dilakukan, saya hanya memerlukan petunjuk tentang cara mencapai hal serupa.
