What is the cause of invalid execution of HTMLElement.click () in the watch of vue

uses the element framework. Use the watch of vue to listen for selectValue changes. When the changes occur, the click (), of input [type=file] is triggered but has no effect.

html related codes

<el-select v-model="selectValue" placeholder="">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
</el-select>
<input type="file" ref="inputFile" id="inputFile">

vue related codes

data () {
    return {
        options:[{
            value: "1",
            label: ""
            }, {
            value: "2",
            label: ""
            },],
        selectValue:""
    }
},

watch: {
    selectValue: function(v) {
        // this.$refs.inputFile.click() 
        // document.getElementById("inputFile").click() 
    }
}
Feb.25,2022

I provide a solution for executing the click () method myself:

  • add the @ change= "handleSelectChange" method of < el-select >
  • execute in the handleSelectChange method: this.$refs.inputFile.click ()
  • through the above method, you can call up the click () method of input and open the file selection window

the point is: the cause of the original problem is still not found

Update 2018-12-21

found the following two reasons:

    The execution of the HTMLElement.click () method in
  1. chrome must be triggered by a user event; for example, if you put it into window.onload, it can be executed in Firefox, but not in chrome.
  2. if the parent element has the influence of even.preventDefault (), HTMLElement.click () will not be executed.
the above methods are the results found in the actual operation. If a great god finds something wrong or there is a document to support it, you are welcome to correct it!
Menu