2017-12-20 19 views
0

私が達成しようとしているのは、ファイルを選択してその内容を新しいダイアログボックスで読み込むことです。同じファイルを選択したときにVueJSファイルの読み込みを再実行

私は試してみる前に、以前に読み込まれたファイルと同じファイルを選択し、別のファイルを選択すると完全に動作します。

動作するように見えるファイル入力をクリアしようとしましたが、それでもファイルを再度選択しません。

下記の私の例を参照してください。

Codepen

new Vue({ 
 
    el: "#app", 
 
    data:() => ({ 
 
    importedData: null, 
 
    dialogImport: false 
 
    }), 
 
    watch: { 
 
    importedData: { 
 
     handler() { 
 
     this.checkData(); 
 
     }, 
 
     deep: true 
 
    } 
 
    }, 
 
    methods: { 
 
    openFileExplorer() { 
 
     this.$refs.fileInputImport.value = ""; 
 
     this.$refs.fileInputImport.click(); 
 
    }, 
 
    selectFile(e) { 
 
     const self = this; 
 
     const file = e.target.files[0]; 
 
     let reader = new FileReader(); 
 
     reader.onload = e => { 
 
     self.importedData = reader.result; 
 
     self.checkedData = true; 
 
     }; 
 
     reader.readAsText(file); 
 
    }, 
 
    checkData() { 
 
     // check the file 
 
     this.dialogImport = true; 
 
    } 
 
    } 
 
});
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet" /> 
 
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" /> 
 

 
<div id="app"> 
 
    <v-app id="inspire"> 
 
    <div class="text-xs-center"> 
 

 
     <input ref="fileInputImport" type="file" name="fileInputImport" @change="selectFile"> 
 

 
     <v-btn color="primary" @click.stop="openFileExplorer()">Choose file</v-btn> 
 

 

 
     <v-dialog v-model="dialogImport" fullscreen transition="dialog-bottom-transition" :overlay="false" scrollable> 
 
     <v-container class="ma-0 pa-0 white" style="max-width:100%"> 
 
      <v-layout row wrap justify-left> 
 

 
      <v-card style="width:100%;"> 
 
       <v-toolbar class="amber lighten-1 elevation-0"> 
 
       <v-toolbar-title>Imported data</v-toolbar-title> 
 
       <v-spacer></v-spacer> 
 
       <div> 
 
        <v-flex xs12> 
 
        <v-container fluid> 
 
         <v-layout row align-center justify-center> 
 

 
         <v-flex> 
 
          <v-tooltip bottom close-delay="0"> 
 
          <v-btn icon slot="activator" @click.native="dialogImport = false"> 
 
           <v-icon>close</v-icon> 
 
          </v-btn> 
 
          <span>Close</span> 
 
          </v-tooltip> 
 
         </v-flex> 
 

 
         </v-layout> 
 
        </v-container> 
 
        </v-flex> 
 
       </div> 
 
       </v-toolbar> 
 
       <div>{{ importedData }}</div> 
 
      </v-card> 
 
      </v-layout> 
 
     </v-container> 
 
     </v-dialog> 
 

 
    </div> 
 
    </v-app> 
 
</div> 
 

 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

答えて

1

私はwatchが必要とされないと思います。ここに更新されたcodepen

importedDataにテキストを読み込みました。しかしimportedDataは、同じファイルを選択すると同じコンテンツを持ちますが、は試していません。this.checkData()

importedDataのいずれかをリセットすると、ダイアログが閉じられたり、時計が削除されたりします。

関連する問題