How to modify Vue.js input element value from console

Question

Given the following code below where <v-input> is a custom input element,

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

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

How would one go about modifying the value of the input element through the browser console? I have tried the following code below but it does not bind to the Vue component.

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

I've also tried emitting custom events but those don't seem to work for me either. Any advice regarding this would be much appreciated.

yamaseventynine · Accepted Answer · 2021-05-15 02:37:17Z

3

I figured it out, I need only dispatch a new input event so that Vue.js catches the value. See below for an example.

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

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

answered May 15, 2021 at 2:37

yamaseventynine

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to modify Vue.js input element value from console

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related