Solution to automatically trigger click events when clicking on pop-up window in Vue (simulation scenario)

Business scenario: Use vue + element ui's el-dialog. After clicking the pop-up window, the data of the first button is loaded by default for initialization.

div

instruction:

 // Automatically trigger click events directives:{
        trigger:{
          inserted(el,binging){
            // console.log("Automatically trigger events")
            el.click()
          }
        }
  },

PS: Let's take a look at vue automatically triggering click events

Yes, click on the list on the left to get the details, but a click event is required. When the page comes in, the click event is triggered by default.

Method 1, vue custom instructions

  directives:{
    trigger:{
     inserted(el, binging){
        console.log(el.id)
        el.id == 'nav0' ? el.click() : null // Only click the first one, the id is manually added in the loop // $(el).trigger('click') // All are triggered once, then the last one}
    }
  },

usage:

 <span class="nav-item" :id="'nav' + index" v-trigger :class="{'active': item.stage == activeId}" @click="navClick(item)" v-for="(item, index) in nav" :key="item.stage">{{item.stage_name}}</span>

The above is the detailed content of the solution (simulated scenario) for automatically triggering click events by clicking on the pop-up window of Vue. For more information about automatically triggering click events of Vue, please pay attention to other related articles on 123WORDPRESS.COM!