在 Chrome 擴展中以編程方式觸發 Vue Js 應用程序的按鈕單擊事件

Question

我正在開發一個 chrome 擴展。 有一個用 VueJs 開發的第三方網站。 我需要觸發頁面上按鈕的點擊事件。 但是，當我使用 JavaScript 執行此操作時，頁面會重新加載，但是當用戶手動單擊按鈕時，它會處理驗證，如果任何驗證失敗，則不會重新加載。

我正在使用以下代碼單擊按鈕（jQuery 代碼）：

$('[type="submit"]').eq(1).trigger('click');

注意：以上代碼正確發起了相關控件的點擊事件，但是頁面重新加載而不是等待驗證結果。 此外，如果我使用 JavaScript 更新控件的值，那么這不會反映在回發中。

謝謝

Answer 1

為您的按鈕添加一個引用，然后使用該引用觸發按鈕事件單擊，請看以下示例：

 Vue.config.devtools = false; Vue.config.productionTip = false; new Vue({ el: '#app', methods: { logTest() { console.log("test test") } }, mounted() { this.$refs.test.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="test" @click="logTest">test</button> </div>