为什么我不能设置输入的值设置为null（输入的类型文件）的vuejs

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中，它并不奏效。有什么问题？

来源

2017-10-16 flypan

你正在做一个比较，而不是分配：

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>

来源

2017-10-16 09:26:05

为什么我不能设置输入的值设置为null（输入的类型文件）的vuejs

回答

相关问题