Question

我正在处理一个Vue页面，该页面上有一个复选框，在挂载后，我需要从cookie中读取一个值，并在必要时选中该复选框。我已经注意到，即使肯定调用了Mounted，在Edge浏览器中也无法正确设置它。

我已将此问题简化为以下最小示例。如果在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)
}

Answer 1

我现在有点猜测。

v-model是输入事件的缩写。但是，原生复选框在单击时会发出更改事件。

如果我对此表示正确，则应执行以下操作：

<input type="checkbox" name="remember" :checked="remember ? 'checked': '' @change=remember = !remember">

更新：还将您的数据部分更改为：

data () {
  return {
    remember: false
  }
}

否则，它可能会干扰该组件的其他实例。

Answer 2

您可以尝试使用此代码（我没有要测试的功能）吗？

  var app = new Vue({
      el: '#app',
      data: {
        remember: false
      },
      methods: {
        check: function () {
          this.remember = true
        }
      },
      // Hooks
      mounted: function () {
        this.check()
      }
    })

已安装的Vue复选框在Edge中不起作用

2 个答案: