如何使用JavaScript为Vue.js的input输入框预填充内容

失效原因 #

Vue的input通过v-model和内部响应式变量双向绑定，直接修改DOM的value属性并不会更新Vue内部的响应式状态，Vue后续重渲染时会用内部存储的变量值覆盖你手动修改的DOM值，因此改动不会生效。

场景1：可修改目标Vue应用源码 #

这是最推荐的实现方式，直接操作绑定的响应式变量即可：

• Vue2选项式API写法：
  如果你的input绑定为<input v-model="inputValue" id="input-24">，直接在对应的Vue实例中修改对应变量即可，建议在mounted生命周期执行确保组件初始化完成：

mounted() {
  this.inputValue = "Hello world"
}

• Vue3组合式API写法：

import { ref, onMounted } from 'vue'
const inputValue = ref('')

onMounted(() => {
  inputValue.value = 'Hello world'
})

场景2：不可修改目标Vue应用源码（如嵌套iframe、微前端子应用） #

如果只能通过原生JS操作DOM实现赋值，需要在修改value后手动触发input事件通知Vue监听逻辑：

const targetInput = document.getElementById('input-24')
// 修改DOM的value值
targetInput.value = 'Hello world'
// 触发input事件，让Vue感知到值变化，同步更新内部响应式状态
targetInput.dispatchEvent(new Event('input', { bubbles: true }))
// 如果input绑定了v-model.lazy修饰符，额外触发change事件
targetInput.dispatchEvent(new Event('change', { bubbles: true }))

注意：如果是跨域iframe场景，需要嵌入的目标站点开启了跨域通信权限，否则会因同源策略限制无法操作iframe内的DOM元素。

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