如何從控制台修改 Vue.js 輸入元素值

Question

給定以下代碼，其中<v-input>是自定義輸入元素，

<template>
    <v-input id="username" type="text" v-model="username" />
</template>

<script>
export default {
    data() {
        return {
            username: "",
        };
    },
};
</script>

go 如何通過瀏覽器控制台修改輸入元素的值？ 我已經嘗試了下面的代碼，但它沒有綁定到 Vue 組件。

const element = document.querySelector("#username");
element.value = "foobar"

我也嘗試過發出自定義事件，但這些似乎對我也不起作用。 對此的任何建議將不勝感激。

Answer 1

我想通了，我只需要調度一個新的輸入事件，以便 Vue.js 捕獲該值。 請參閱下面的示例。

const inputBox = document.querySelector("#inputBox");

inputBox.value = "hello";
inputBox.dispatchEvent(new Event('input'));