vue 2で作業するプログレスバーを取得する

Question

複数の画像をアップロードできるフォームを作成しようとしています。私がしようとしているのは、各画像に対して を表示するプログレスバーを取得することです。私が苦労しているのは、進行状況バーを動作させることです。私は何の誤りもありません。私はすべての情報を残してきた場合は2

マイFrames.vueが

<template> 
    <div class="content-form"> 
     <form @submit.prevent="submit(data)" enctype="multipart/form-data" ref="myFileInputForm"> 
      <div class="form-group"> 
       <label>Title</label> 
       <input type="text" id="title" class="form-control" name="title" v-model="model.title"> 
      </div> 

      <div class="form-group"> 
       <input type="file" name="image[]" multiple="multiple" ref="fileInput" v-on:change="change"> 
       {{ currentProgress }} 

       <div v-for="image in _images"> 
        <img :src="image" width="100"> 
       </div> 
      </div> 

      <div class="progress"> 
       <div class="progress-bar" role="progressbar" :style="{width: change}"> 

       </div> 
      </div> 

      <input type="submit" class="btn btn-primary" value="Submit"> 
     </form> 
    </div> 
</template> 

<script> 

    export default { 

     props: [ 
      'data', 
      'images' 
     ], 

     mounted() { 
      if(this.data){ 
       Object.assign(this.model, this.data); 
      } 
     }, 

     data() { 
      return { 
       model: { 
        id: '', 
        title: '', 
        image: '' 
       }, 

       currentProgress: 0, 
      } 
     }, 

     computed: { 
      _images(){ 
       var images = []; 

       if(this.images){ 
        for(let i = 0; i < this.images.length; i++){ 
         images[i] = window.location.origin+'/frame_images/'+this.images[i]; 
        } 

        return images; 
       } 
      }, 
     }, 

     methods: { 

      change(percentCompleted){ 
       this.currentProgress = percentCompleted 
       return this.currentProgress; 
      }, 

      save(){ 

       let imageArray = this.$refs.fileInput.files; 

       var formData = new FormData(); 

       var config = { 
        onUploadProgress: function(progressEvent){ 
         var percentCompleted = Math.round((progressEvent.loaded * 100)/progressEvent.total); 

         this.currentProgress = percentCompleted 
        } 
       } 

       formData.append('title', this.model.title); 
       for(let i = 0; i < imageArray.length; i++){ 
        formData.append('image[]', imageArray[i]) 
       } 

       if(this.id){ 
        formData.append('_method', 'PUT'); 
        return axios.post('/frames/'+this.id, formData); 
       }else{ 
        return axios.post('/frames/', formData, config); 
       } 
      }, 

      submit(){ 
       this.save().then(function(response){ 
        window.location = response.data.redirect; 

       }); 
      }, 
     } 
    } 
</script> 

私に知らせてくださいLaravel 5.5とVUEを使用しています。

Answer 1

スタイルバインド​​は間違っています。 changeはデータプロパティではないメソッドです。

ここでは多くのことが行われています。コードを簡単に管理できるように、プログレスバーを別の再利用可能なコンポーネントに抽出する方がよいでしょう。

ここで私はあなたのアイデアを与えるために作られたシンプルなプログレスバーコンポーネントです：

Vue.component('progress-bar', { 
 
    template: ` 
 
    <div class="progress-bar"> 
 
     <div class="progress-bar-bar" :style="barStyle"></div> 
 
    </div> 
 
    `, 
 
    props: { 
 
    min: { type: Number, default: 0 }, 
 
    max: { type: Number, default: 1 }, 
 
    value: { type: Number, default: 0 }, 
 
    }, 
 
    computed: { 
 
    barStyle() { 
 
     const frac = Math.min(1, Math.max(0, (this.value - this.min)/(this.max - this.min) || 0)); 
 
     return { width: frac * 100 + '%' }; 
 
    }, 
 
    }, 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    value: 0, 
 
    }, 
 
    created() { 
 
    // Simulate loading 
 
    setInterval(() => { 
 
     this.value += 0.1; 
 
     if (this.value > 1) this.value = 0; 
 
    }, 500); 
 
    }, 
 
});

.progress-bar { 
 
    height: 5px; 
 
    background-color: #eee; 
 
} 
 

 
.progress-bar-bar { 
 
    height: 100%; 
 
    background-color: #007fff; 
 
    transition: width 0.2s ease-in-out; 
 
}

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <progress-bar :value="value"></progress-bar> 
 
</div>