我如何傳遞一個對象數組作爲道具到組件，然後傳遞數組的成員作爲道具嵌套組件？

在這篇文章中編輯的底部我解決我想要的東西來完成，哪些已經幾乎工作我如何傳遞一個對象數組作爲道具到組件，然後傳遞數組的成員作爲道具嵌套組件？

以下是我的應用程序都在應用上面定義的<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: [], 
    }, 
});

編輯：如果我直接傳遞uploads陣列內<oo-uploads><oo-upload>一個實例，它通過全陣列下來就好了，但由於某些原因，它不會通過遍歷數組，並通過剛剛objUpload對象。

EDIT2：基本上我想要做的就是將我傳遞的數據範圍限制爲只有該組件所必需的範圍。我希望上傳組件僅對分配給它的上傳起作用。我承認我的做法可能很差，或者我的實施可能不可行，我只需要一個關於如何完成類似事情的指示。

來源

2016-08-12 gopher

根據Vue.js documentation

因此，建議以總是有一個單一的根級別，普通元件中的模板。

嘗試包oo-upload-template與tr和改變

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

到

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

Example fixed fiddle

來源

2016-08-12 12:37:15 pkawiak

你知道爲什麼被顯示在表格上方的行，而不是內作爲行？ – gopher

哎唷，忘記了可怕的表格案例......如[docs]（http://vuejs.org/guide/components.html#Template-Parsing）中所述_table只能包含thead，tbody，tfoot和tr，並且這些元素應該是table_的直接子元素，因爲_custom標籤將被吊起，因此不能正確渲染。我已經更新了使用'is'的回答＃ – pkawiak

我做了你所建議的所有更改，但是直到我打破'upload'並單獨傳遞其屬性爲'。我不知道爲什麼...... – gopher

我如何傳遞一個對象數組作爲道具到組件，然後傳遞數組的成員作爲道具嵌套組件？

回答

相關問題