javascript - 如何从控制台修改 Vue.js 输入元素值

Question

给定以下代码，其中 <v-input>是自定义输入元素，

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

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

如何通过浏览器控制台修改输入元素的值？我在下面尝试了以下代码，但它没有绑定(bind)到 Vue 组件。

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

我也尝试过发出自定义事件，但这些似乎也不适合我。对此有任何建议，我们将不胜感激。

Answer 1

我想通了，我只需要分派(dispatch)一个新的输入事件，以便 Vue.js 捕获该值。请参阅下面的示例。

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

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