在 vue.js 中加载页面或视图后如何触发点击事件？

Question

一旦加载页面或视图，就会触发点击，并在vue.js 中触发popup 以编辑数据表行。我找不到这么好的VUE方式，虽然下面的链接提到了一种方式如下：

https://forum.vuejs.org/t/how-to-trigger-a-click-event-through-code-in-vuejs-on-page-load/92582

mounted: function () {
    setTimeout(function(){ 
        const elem = document.getElementById('myBtn');
            elem.click(); 
    }, 100);
},

我以类似的方式进行了以下操作。 try catch 包含错误，尽管它很丑陋，因为在某些时候数据不存在。

edit: function (idx, row) {
    ... nore code here ...
    try {
        document.getElementById(row.id).click();  // row.id is dynamic or variable
    } catch (error) {
        // pass
    }
},

但是我的队友，一个 vue.js 爱好者，说这不是该死的 VUE 方式。现在做这种事情的正确方法是什么？

以下 Demo 可用于预期工作：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
el: '#app',

data: {
  li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
  name: 'NY'
},

methods: {
},
mounted() {
  console.log(['this.name', this.name]);

  // this.$refs[this.name].click(); // failed
  document.getElementById(this.name).click();  // worked. the click is triggered upon this.name
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

<div id="app" class="container">

<div class="uk-grid" uk-grid>
<div v-for="r in li_address">
    <label>{{r.name}}
    <input :id="r.name" :ref="r.name" type="radio" class="uk-radio" :value="r"
     name="address_group">
    </label>
</div>

  </div>

</div>

Answer 1

为您的元素添加一个名为 myBtn 的引用，例如：

  <div ref="myBtn" >some content</div>

然后运行点击：

 this.$refs.myBtn.click()

示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',


  methods: {
    logOk() {
      console.log("OK OK")
    }

  },
  mounted() {
    this.$refs.okBtn.click()

  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <button ref="okBtn" @click="logOk"> OK</button>
</div>

Answer 2

在您的示例代码中，不需要任何 DOM 操作。像 Vue 这样的声明式响应式框架的主要优势在于模型的更改会自动传播到视图。这将通过适当地设置v-model 来选择适当的单选按钮。

new Vue({
  el: '#app',
  data() {
    return {
      li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
      name: 'NY'
    }
  }
})

<div id="app" class="container">
  <div class="uk-grid" uk-grid>
    <div v-for="r in li_address">
      <label :for="r.name">{{r.name}}
      <input type="radio" v-model="name" :id="r.name" :value="r.name">
      </label>
    </div>
    <h4>NAME: {{ name }}</h4> 
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

Answer 3

只需选择您的元素并在 Vue 应用程序的 Mounted 生命周期上触发 Click 事件

mounted() {
 this.$nextTick(() => {
   document.getElementById('myBtn').click()
 });      
}

$nextTick 根据 VueJs 文档：

将回调推迟到下一个 DOM 更新周期后执行。采用 在您更改一些数据以等待 DOM 之后立即执行此操作 更新。