vue中如何在不直接操纵dom的情况下清除<input type='file'>标签中的value值

Question

问题描述

最近发现一个问题，无论使用:value='value_1'还是v-modle都无法清空<input type='file'>标签中的value值，如果ref倒是可以，但是这样的话，就违背了不直接操纵真实dom的原则，请问有什么解决的办法吗？

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div>

<input type="file" :value="vaule_1" ref="inputFile">
<button @click="reset">清空</button>

</div>
</template>

<script>
export default {

data() {
    return {
        value_1: ""
    }
},

methods: {
    reset() {
        this.value_1 = ""
        // this.$refs.inputFile = ""
    },

}

}
</script>

Answer 1

测试地址，我的是可以实现的

new Vue({
  el: '#app',
  data:{
    fileInput: ''
  },
  methods:{
    reset(){
      this.fileInput = ''
    }
  }
})

<div id="app">
  <button @click="reset">reset</button>
  <input type="file" v-model="fileInput"/>
  {{fileInput}}
</div>

Answer 2

重点是你没双向绑定 把:value换成 v-model

Answer 3

这个跟react的受控表单不一样,你可以使用楼上的 v-model，页可以在清空的时候 调用一下this.$forceUpdate() 来强制刷新视图

Answer 4

v-model="value_1"