javascript - 如何从 JS 更改 v-model 值
问题描述
我正在使用 Google 自动填充地址表单。我在谷歌官方网页上找到了例子。一切安好。一切正常!但它是原生 Javascript,
我有 Vue 应用程序,但我不喜欢如何从 JS 脚本更改文本输入值。这个想法是,当我在主输入中更改某些内容时,JS 事件侦听器应该更改其他输入的值:
document.getElementById(addressType).value = val;
问题是我应该使用“文档”来更改值:
document.getElementById('street_number').value
我想要类似 tat 的东西:
<input type="text" v-model="input.address" ref="addressRef">
并读取值:
export default {
data() {
return {
input: {
address: "",
...
}
};
},
methods: {
test() {
console.log(this.input.address);
console.log(this.$refs.addressRef);
}
}
所以问题是:
- 如何从 JS 代码中设置值以更新绑定值?现在值是空的,因为我使用 "getElementById("id").value = val"
解决方案
您可以在之后发出input
事件,该事件v-model
依赖于更新其value
:
let el = document.getElementById("id");
el.value = val;
el.dispatchEvent(new Event('input'));
在行动:
Vue.config.devtools = false
const app = new Vue({
el: '#app',
data: {
message: null
},
methods: {
updateBinding() {
let el = document.getElementById("input");
el.value = 'Hello!';
el.dispatchEvent(new Event('input'));
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="updateBinding">Click me </button><br>
<input id="input" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
推荐阅读
- java - Quarkus 使用 kafka 进行响应式消息传递
- python - 使用 Python 打印 MongoDB 集合的名称
- java - 我是否正确使用了 Android BLE API?
- c++ - 仅当程序第一次运行时,如何创建文件?
- javascript - 从 Firebase 存储获取下载 url 的问题
- javascript - 在 Vue js 中使用 axios 会丢失对象的属性
- python - 如何从网页传递 id 并用于 sql 查询?
- javascript - 使用 json html 和 js 创建图像网格
- php - PHP Pear 包未安装在 IIS10 上
- python - 2 个列表中的相同单词