Javascript Vue2-使用：选中复选框输入会中断默认行为

我正在做一个“状态更新”组件，在我的实际组件中，我将第一个自定义复选框（顶部的圆圈等）标记为选中的

…但是对于下面的代码笔，我只是将它们全部标记为

：checked='false'

，以重复我的问题

“twitter”复选框不会选中或取消选中。脸谱网的会

我确信这与我在twitter复选框中启用/禁用字符计数器有关。如果您单击其中一个twitter复选框，您会注意到字符计数器已打开，但该复选框从未被选中（或者更确切地说，先被选中，然后立即被取消选中）

例如，在方法

toggleMaxCharLength（）

中，如果我注释掉

self.enableMaxCharLength=true，复选框按其应做的方式工作

如果我从输入
v-for
中删除
：checked='false'
，它将正常工作

更新-工作笔和解决方案：
检查twitter帐户会导致重新呈现，当然，这会将您的
检查的
值设置为false

您需要记住选中的值。我做了一些小的修改，但是还有其他的方法

<input type="checkbox"
       :ref="key"
       :name="scheduleUsingBuffer ? 'buffer_profiles[]' : key + '[]'" 
       :value="scheduleUsingBuffer ? account.profile_id : account.page_id"                              
       :checked="account.checked"   
       @change="handleAccountInputChange(key, account)">


另一种避免这种情况的方法是将复选框抽象到它们自己的组件中，这些组件记住它们的状态，以便在父级重新渲染时，复选框的状态不会被覆盖

此外，该笔还转换成了一个SO代码段


var账户={
facebook：{
测试1：{
页面id:'23derf56hg'，
img_url:null
}
},
推特：{
测试2：{
页面id:'fr2wlfrhoi'，
img_url:null
},
测试3：{
页面id:'92frgl5639'，
img_url:null
}
}
}
var app=新的Vue({
el:“#应用程序”，
安装的（）{
设置超时（（）=>{
Object.key（accounts）.forEach（（站点，站点索引）=>{
Object.key（accounts[site]）.forEach（（account，actIndex）=>{
帐户[站点][帐户][“已选中”]=（站点索引==0&&actIndex==0）
})
})
console.log（帐户）
this.connectedAccounts=帐户
}, 100)
},
数据：{
消息：“你好，Vue！”，
已连接帐户：[]，
scheduleUsingBuffer:false，
formData:{}，
enableMaxCharLength:false，
maxCharCount:140，
剩余字符数：140，
isAboveMaxCharCount:错，
状态消息：“”
},
方法：{
提交（事件）{
this.formData=serialize（event.target，{hash:true}）；
},
toggleMaxCharLength（）{
this.enableMaxCharLength=false；
Vue.nextTick（（）=>{
var self=这个；
这是.refs.twitter.forEach（twitterInput=>{
if（twitterInput.checked）{
self.enableMaxCharLength=true；
}
});
});		
},
handleAccountInputChange（类型、帐户）{
此.$set（帐户“已选中”，！帐户.已选中）
如果（type='twitter'）{
this.toggleMaxCharLength（）；
}
},
倒计时{
this.remainingCharCount=this.maxCharCount-this.statusMessage.length；
this.isAboveMaxCharCount=this.remainingCharCount<0；
}    
}
})
section.create-story{
保证金：30像素自动；
宽度：425px；
}
第3.4节创建一层h4{
边缘底部：15px；
字母间距：0.1米；
文本转换：大写；
字体大小：正常；
字体大小：14px；
}
section.create-story.switch{
显示：块；
边缘底部：20px；
}
第4节创建故事#关联账户{
边缘底部：15px；
}
section.create-story#connected accounts label.account-checkbox{
位置：相对位置；
显示：内联块；
利润率：0 5px 0 px 0；
光标：指针；
}
section.create-story#connected accounts label.account-checkbox.avatar{
位置：相对位置；
宽度：38px；
高度：38px；
边界半径：50%；
背景尺寸：封面！重要；
背景位置：中心！重要；
背景色：#CCC！重要；
边框：2个实心#CCC；
过渡：所有0.1都易于输入输出；
}
section.create-story#connected accounts label.account-checkbox.avatar，
section.create-story#connected accounts label.account-checkbox.account图标{
滤镜：灰度（100%）；
不透明度：0.3；
}
section.create-story#connected accounts label.account-checkbox.avatar:hover，
section.create-story#connected accounts label.account-checkbox.帐户图标：悬停{
不透明度：1；
}
section.create-story#connected accounts label.account-checkbox输入[type=“checkbox”]{
显示：无；
}
section.create-story#connected accounts label.account-checkbox输入[type=“checkbox”]：选中+.avatar{
边框：2倍纯绿；
}
section.create-story#connected accounts label.account-checkbox输入[type=“checkbox”]：选中+.avatar+.account图标{
颜色：绿色；
}
section.create-story#connected accounts label.account-checkbox输入[type=“checkbox”]：选中+.avatar，section.create-story#connected accounts label.account-checkbox输入[type=“checkbox”]：选中+.avatar+.account图标{
过滤器：灰度（0）；
不透明度：1；
}
section.create-story#connected accounts label.account-checkbox.account图标{
位置：绝对位置；
字体大小：13px；
宽度：24px；
高度：24px；
线高：24px；
右：-4px；
底部：-4px；
背景：白色；
颜色：#4d；
边界半径：50%；
指针事件：无；
盒影：0 1px 0 px rgba（49,49,93,0.05），0 2px 3px 0 rgba（49,49,93,0.2），0 1px 1px 0 rgba（0,0,0,0.1）；
}
第4节创建故事#状态{
边缘底部：20px；
填充：15px；
边界半径：5px；
边框：1px实心#4d；
}
section.create-story#状态文本区域{
显示：块；
边缘底部：15px；
填充：0；
字体：斜体；
字体大小：14px；
最小高度：60px；
边界：无；
盒影：无；
}
section.create-story#status.remaining-chars.has-text-danger{
字体大小：粗体；
}

新故事
handleAccountInputChange(type, account) {
  this.$set(account, 'checked', !account.checked)
  if (type == 'twitter') {                  
    this.toggleMaxCharLength();
  }
},