爲什麼我不能設置輸入的值設置爲null（輸入的類型文件）的vuejs

Question

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    msg: "hello world" 
 
    }, 
 
    methods: { 
 
    trigger: function() { 
 
     
 
     var fileLoader = document.getElementById('fileLoader'); 
 
     //clear file value 
 
     if(fileLoader.files.length > 0) { 
 
      fileLoader.value == null; 
 
      alert(fileLoader.files[0].name);   
 
     } 
 
     fileLoader.click(); 
 

 
     }, 
 
     
 
    fetchData: function() { 
 
     console.log('hello'); 
 
    } 
 

 
    } 
 
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 

 
<div id="app"> 
 
    <button @click="trigger">upload image</button> 
 
    <input type="file" id="fileLoader" v-show="false" @change="fetchData"> 
 
</div>

你知道在Chrome中，當你第一次選擇一個文件，輸入將觸發的onchange事件，但第二次你選擇相同的文件，輸入不會觸發onchange事件，所以我想設置輸入的值爲空，之前選擇相同的文件，它使用jQuery或純JavaScript。但在vuejs中，它並不奏效。有什麼問題？

Answer 1

你正在做一個比較，而不是分配：

fileLoader.value == null; 

這應該是：

fileLoader.value = null; 

而且這意味着你將不能夠提醒你文件名完成此操作後， ，因爲那時價值已經被清除了。所以這條線應該來清除之前：

alert(fileLoader.files[0].name); 

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    msg: "hello world" 
 
    }, 
 
    methods: { 
 
    trigger: function() { 
 
     
 
     var fileLoader = document.getElementById('fileLoader'); 
 
     //clear file value 
 
     if(fileLoader.files.length > 0) { 
 
      alert(fileLoader.files[0].name); 
 
      fileLoader.value = null;  
 
     } 
 
     fileLoader.click(); 
 

 
     }, 
 
     
 
    fetchData: function() { 
 
     console.log('hello'); 
 
    } 
 

 
    } 
 
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 

 
<div id="app"> 
 
    <button @click="trigger">upload image</button> 
 
    <input type="file" id="fileLoader" v-show="false" @change="fetchData"> 
 
</div>