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>

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 更新

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>
添加回答
舉報(bào)