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

Question

在下面的代码中，<v-input> 是一个自定义输入元素。

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

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

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

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

我还尝试了发出自定义事件，但是它们对我也没有起作用。 如有建议，请不吝赐教。

- user12922812

Answer 1

我明白了，我只需要触发一个新的输入事件，这样Vue.js就可以获取值。以下是一个示例。

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

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

- user12922812