第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在 vue.js 中加載頁(yè)面或視圖后觸發(fā)點(diǎn)擊事件?

如何在 vue.js 中加載頁(yè)面或視圖后觸發(fā)點(diǎn)擊事件?

Cats萌萌 2024-01-18 16:56:33
遇到這樣的情況:加載頁(yè)面或視圖后觸發(fā)單擊,并popup觸發(fā)vue.js編輯數(shù)據(jù)表行。我找不到這么好的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);},我以類似的方式做了如下。包含錯(cuò)誤try catch,盡管它很丑陋,因?yàn)樵谀承r(shí)候數(shù)據(jù)不存在。edit: function (idx, row) {    ... nore code here ...    try {        document.getElementById(row.id).click();  // row.id is dynamic or variable    } catch (error) {        // pass    }},然而我的隊(duì)友,一個(gè) vue.js 愛(ài)好者,說(shuō)這不是一個(gè)該死的 VUE 方式?,F(xiàn)在做這樣的事情的正確方法是什么?
查看完整描述

3 回答

?
互換的青春

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

向您的元素添加一個(gè)名為 like 的 ref myBtn:


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

然后運(yùn)行點(diǎn)擊:


 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>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
12345678_0001

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

只需選擇您的元素并在MountedVue 應(yīng)用程序的生命周期中觸發(fā) Click 事件


mounted() {

 this.$nextTick(() => {

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

 });      

}

$nextTick根據(jù) VueJs 文檔:


推遲回調(diào)在下一個(gè) DOM 更新周期后執(zhí)行。更改一些數(shù)據(jù)后立即使用它以等待 DOM 更新


查看完整回答
反對(duì) 回復(fù) 2024-01-18
?
紫衣仙女

TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊

在您的示例代碼中,不需要任何 DOM 操作。像 Vue 這樣的聲明式響應(yīng)式框架的主要優(yōu)勢(shì)是將模型的更改自動(dòng)傳播到視圖。只需通過(guò)v-model適當(dāng)?shù)脑O(shè)置即可選擇適當(dāng)?shù)膯芜x按鈕。


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>



查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 3 回答
  • 0 關(guān)注
  • 275 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)