javascript - 如何从控制台修改 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"

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

标签： javascriptvue.js

Answer 1

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

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

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