鍍金池/ 問答/HTML/ vue中如何在不直接操縱dom的情況下清除<input type='fil

vue中如何在不直接操縱dom的情況下清除<input type='file'>標(biāo)簽中的value值

問題描述

最近發(fā)現(xiàn)一個(gè)問題，無論使用:value='value_1'還是v-modle都無法清空<input type='file'>標(biāo)簽中的value值，如果ref倒是可以，但是這樣的話，就違背了不直接操縱真實(shí)dom的原則，請(qǐng)問有什么解決的辦法嗎？

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
<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>

回答
編輯回答
絯孑氣

測試地址，我的是可以實(shí)現(xiàn)的

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>
2018年2月20日 00:26
編輯回答
落殤

v-model="value_1"

2017年4月2日 08:34
編輯回答
心沉

這個(gè)跟react的受控表單不一樣,你可以使用樓上的 v-model，頁可以在清空的時(shí)候 調(diào)用一下this.$forceUpdate() 來強(qiáng)制刷新視圖

2018年5月20日 00:52
編輯回答
枕邊人

重點(diǎn)是你沒雙向綁定 把:value換成 v-model

2018年1月22日 13:08