纯javascript代码修改react,vue 的输入框的值

一. react

function changeReactInputValue(inputDom,newText){
	let lastValue = inputDom.value;
	inputDom.value = newText;
	let event = new Event('input', { bubbles: true });
	event.simulated = true;
	let tracker = inputDom._valueTracker;
	if (tracker) {
  	tracker.setValue(lastValue);
	}
	inputDom.dispatchEvent(event);
}
 
//使用方法
var usernameDom = document.querySelector(`#loginName`)		//普通JS获取输入框Dom
var pwdDom = document.querySelector(`#pwd`)		//普通JS获取输入框Dom
changeReactInputValue(usernameDom, '15997503830@sanxia');
changeReactInputValue(pwdDom, 's123456');
document.querySelector(`.login-form-button`).click();

二. vue

vue 是通过input事件来触发双向绑定的，而你用单纯的js 去修改input值，并没有触发他的input事件，通过下方代码，进行触发即可。两种方式选其一即可。

event.target.dispatchEvent(new Event('input'));

el.dispatchEvent(new Event('input'));

其实input值中的value属性和v-model属性是有一定差异的。

input中v-model和value不能同时调用，可能会有问题

<input type="text" v-model="keyWord" value="请输入地名地址" >

当使用如上代码时，输入框内并没有显示“请输入地名地址”字样，其原因是：

v-model官方给出的说发是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：　v-model是动态绑定值到value，然后监听input的inpit事件获取值后赋给dataA的一个过程。因此默认的value不会显示，仅会在初始化渲染时短暂显示。