今天遇到一个vue诡异的数据绑定问题，下面我给大家分享一下我解决问题思路和方式，以及为什么要这样。

一、问题现象

使用vant的checkbox组件时无法使用v-model来双向绑定选中状态！但是重新打开checbox所在的pop弹窗，又能显示之前操作的最新的选中值，如果不关闭之后重新打开，始终都不更新，感觉好像没有没有反应一样。

二、问题代码

html代码：

1. <div v-for="item in siteList" :key="'site-'+ item.id" class="list-site-item" @click="toggleSiteItem(item)">
2. <div class="site-name">{{ item.siteName }}{{item.siteCode}}</div>
3. <div class="site-other-info">
4. <div class="site-check-cont">
5. <van-checkbox :name="item.id" v-model="item.isChecked" shape="square">
6. </van-checkbox>
7. </div>
8. <div class="site-other-right">
9. <div class="site-info-item">
10. <div class="site-info-label">区域：</div>
11. <div>{{ item.areaName }}</div>
12. </div>
13. <div class="site-info-item">
14. <div class="site-info-label">省份：</div>
15. <div>{{ item.province }}</div>
16. </div>
17. <div class="site-info-item">
18. <div class="site-info-label">二级单位：</div>
19. <div>{{ item.companyName }}</div>
20. </div>
21. </div>
22. </div>
23. <van-divider />
24. </div>

为了保持接口的kiss，后台接口不返回是否选中“isChecked”这个字段（为了让接口简单，一般接口都不返回后台没有存储的属性）。

原来的js代码：

1. searchActiveSites({
2. keywords: that.searchSiteKeywords
3. }).then(res => {
4. that.siteList = res.data;
6. that.siteList.forEach(m => {
7. m.isChecked = false;
8. });
9. that.loadSitefinished = true;
10. });

动态的加上属性“isChecked”。

切换选中状态：

1. let that = this;
2. // that.$refs.checkboxes[index].toggle();
3. // debugger;
4. that.siteList.forEach(m => {
5. if (m.id === item.id) {
6. m.isChecked = !m.isChecked;
7. }
8. });

三、解决问题

1. searchActiveSites({
2. keywords: that.searchSiteKeywords
3. }).then(res => {
4. that.siteList = res.data;
5. if (res && res.data.length > 0) {
6. // Vue.set 等同 this.$set
7. that.siteList.forEach(m => {
8. that.$set(m, 'isChecked', false);
9. });
10. }
11. // 诡异问题，不能v-model双向绑定，需要重新打开pop
12. // that.siteList.forEach(m => {
13. // m.isChecked = false;
14. // });
15. that.loadSitefinished = true;
16. });

使用$set方法添加对象属性！问题就解决了！

四、问题分析及总结

原来vue官方文档有相关说明：

深入响应式原理 — Vue.js

vant vue v-model双向绑定checkbox遇到的坑_蓝狐软件工作室蓝狐软件工作室专注于ASP.NET、PHP、ASP.NET MVC、J2EE和数据库等技术的网站、微信小程序开发、管理系统、软件开发服务及技术原创知识和编程资料的传播。我们是一个专业的开发团队，团队成员都是从事网站、软件开发6年以上经验的高级软件工程师，拥有大量成功案例。https://www.lanhusoft.com/Article/771.html