亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 vue.js 中加載頁面或視圖后觸發點擊事件?

如何在 vue.js 中加載頁面或視圖后觸發點擊事件?

Cats萌萌 2024-01-18 16:56:33
遇到這樣的情況:加載頁面或視圖后觸發單擊,并popup觸發vue.js編輯數據表行。我找不到這么好的VUE方法,盡管下面的鏈接提到了一種方法,如下所示:https://forum.vuejs.org/t/how-to-trigger-a-click-event-through-code-in-vuejs-on-page-load/92582mounted: 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 方式?,F在做這樣的事情的正確方法是什么?
查看完整描述

3 回答

?
互換的青春

TA貢獻1797條經驗 獲得超6個贊

向您的元素添加一個名為 like 的 ref 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>


查看完整回答
反對 回復 2024-01-18
?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

只需選擇您的元素并在MountedVue 應用程序的生命周期中觸發 Click 事件


mounted() {

 this.$nextTick(() => {

   document.getElementById('myBtn').click()

 });      

}

$nextTick根據 VueJs 文檔:


推遲回調在下一個 DOM 更新周期后執行。更改一些數據后立即使用它以等待 DOM 更新


查看完整回答
反對 回復 2024-01-18
?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

在您的示例代碼中,不需要任何 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>



查看完整回答
反對 回復 2024-01-18
  • 3 回答
  • 0 關注
  • 246 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號