我正在处理一个 Vue 页面，该页面上有一个复选框，安装后我需要从 cookie 中读取一个值，并在必要时选中该复选框。我注意到在 Edge 浏览器中它没有正确设置，即使 Mounted 确实被调用了。
我已将此问题提炼为以下最小的示例。如果你在 Edge 中打开它并点击刷新，你应该会看到它有时没有被选中。在 Chrome/IE11 中，它始终如此。
对于导致此问题的原因以及如何解决它有什么建议吗？
<!DOCTYPE html>
<html>
<head>
<title>Vue / Edge Checkbox Issues</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p>This checkbox should become checked on mounted. Hit refresh and see what happens in MS Edge.</p>
<label>
<input type="checkbox" name="remember" v-model="remember">
<span>Remember Me</span>
</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
remember: false
},
methods : {
check () {
this.remember = true
}
},
// Hooks
mounted () {
this.check()
}
})
</script>
</body>
</html>
编辑:
我没想到要提到这个......但值得注意的是，将 this.check() 包装在 setTimeout 中允许它工作，但对我来说需要延迟到 > 60。所以这修复了它，但显然真的很 hacky，不应该需要。
mounted () {
setTimeout(() => {
this.check()
}, 120)
}
最佳答案
我现在有点猜测。
v-model 是输入事件的缩写。 但原生复选框会在单击时发出更改事件。
如果我的看法是正确的，那么以下应该有效:
<input type="checkbox" name="remember" :checked="remember ? 'checked': '' @change=remember = !remember">
更新: 还将您的数据部分更改为:
data () {
return {
remember: false
}
}
否则它可能会干扰该组件的其他实例。
关于javascript - Mounted 上的 Vue 复选框在 Edge 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55302799/