Vuetify表单字段DOM方法赋值后焦点切换值丢失问题求助

问题原因 #

Vuetify的v-text-field、v-text-area等表单组件基于Vue的数据驱动机制运行：组件显示的值绑定到Vue实例的响应式状态，而非直接依赖DOM元素的value属性。当你通过document.querySelector直接修改DOM的value时，只是临时改变了视图展示，但没有更新底层的Vue状态。焦点切换时，组件会重新从Vue状态中读取值，覆盖你手动修改的DOM内容，导致值被重置。

解决方案 #

1. 直接操作DOM并同步Vue状态 #

要让Vue感知到DOM值的变化，需要在修改value后手动触发input事件（Vue会监听该事件同步响应式状态）。执行以下脚本即可：

const inputEl = document.querySelector('#input-0'); // 替换为你的字段选择器
inputEl.value = 'test';
// 触发input事件，让Vue同步状态
inputEl.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));

如果是v-text-area，需要定位到内部的textarea元素：

const textareaEl = document.querySelector('v-text-area textarea');
textareaEl.value = '大段测试文本';
textareaEl.dispatchEvent(new Event('input', { bubbles: true }));

2. Selenium端高效解决方案 #

针对Selenium中sendKeys输入大文本效率低的问题，直接通过JavascriptExecutor执行上述逻辑，既高效又能避免值被重置。

Java示例

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.By;

// 定位目标元素
WebElement inputElement = driver.findElement(By.id("input-0"));
// 执行JS脚本赋值并触发事件
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(
    "arguments[0].value = arguments[1]; arguments[0].dispatchEvent(new Event('input', { bubbles: true }));",
    inputElement,
    "需要输入的大段文本"
);

Python示例

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
# 定位元素
input_element = driver.find_element(By.ID, "input-0")
# 执行脚本
driver.execute_script(
    "arguments[0].value = arguments[1]; arguments[0].dispatchEvent(new Event('input', { bubbles: true }));",
    input_element,
    "需要输入的大段文本"
)

3. 进阶：直接修改Vue实例状态 #

如果能访问到Vue实例，也可以直接修改绑定的响应式数据，这种方式更直接，但依赖组件内部结构，稳定性稍差：

// 获取组件对应的Vue实例
const vueInstance = document.querySelector('#input-0').__vue__;
// 修改绑定的状态（替换为你实际的绑定字段名，比如vueInstance.form.username）
vueInstance.yourBoundDataKey = 'test';

内容的提问来源于stack exchange，提问作者wahab memon