使用js修改vue.js双向绑定的表单内容

当网页使用vue.js双向绑定的表单内容时，直接用js修改表单对象的value属性是不会更新对应数据的，在自动化测试或者自从填表程序中产生了一定的麻烦，例如下面这个例子 网页内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue demo</title>

    </style>
    <script src="./vue-2.6.12.js"></script>

  </head>

  <body>
    <div id="app1" v-cloak>
        <input id="username" type="text" name="username" v-model="username">
    </div>

    <script>
      var app1 = new Vue({
        el: "#app1",
        data: {
          username: "hello "
        }

      });
    </script>
  </body>
</html>

当页面渲染完成，用控制台执行代码

let uname = document.getElementById("username");
uname.value="my_new_name";

此时，页面上input文本框里面的内容变成了my_new_name

但是打印变量 app1.data 查看属性发现 

 

 

 username还是hello

因为vue是根据事件来双向绑定的，当没有触发事件的时候，绑定逻辑就不会发生，所以这里仅仅是html内容更改了，但实际数据没变。需要手动触发一下事件，input文本框就是input事件，其他表单可能是change事件，具体情况需要自行调整。

再补一句

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

此时再次打印app1

 

 数据已经同步了

posted @ 2021-11-05 17:30  鱼肉真好吃  阅读(635)  评论(0)  编辑  收藏  举报