为什么我不能在 Vuejs 中将输入的值设置为 null(输入的类型是文件)

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事件，因此我想将input的值设置为null，然后再选择相同的文件，该文件使用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>