twitter-bootstrap - 在 Vue 中，v-绑定(bind)不适用于 Bootstrap Toggle Checkboxes 的 "checked"属性？

Question

<input type="checkbox" data-toggle="toggle" id="id2" :checked="foo.bar">

上面的代码行应在 foo.bar ( bool 值)为 1 时检查输入，并在 foo.bar 为 0 时取消选中该框，但是当值为 1 时，它从不选中该框。

当我从上一行代码中删除 data-toggle="toggle" 时，它工作得很好，但这使得显示显示为一个无聊的复选框，而不是一个整洁的 Bootstrap 切换，所以这对我来说不是一个可能的解决方法。我正在使用最新版本的 bootstrap-toggle，我的文件中包含以下代码:

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

此外，如果我将 "foo.bar" 显式替换为 "1"，即使使用 data-toggle="toggle"，也会选中该框“ 留在其中。这让我认为 Vue 和 Bootstrap Toggle 的交互方式存在一些问题。有谁知道这个错误是什么原因造成的吗？

Answer 1

在这种情况下你需要手动处理。

首先，您需要通过添加 ref 属性来获取对复选框元素的引用:

<input type="checkbox" ref="checkbox" :checked.prop="foo.bar">

然后您需要创建一个观察程序来手动更新切换插件的值:

watch: {
    'foo.bar': function(enabled) {
        $(this.$refs.checkbox).bootstrapToggle(enabled ? 'on' : 'off')
    }
},

为了保持数据双向同步，您需要在 mounted 回调函数中添加一个 change 事件监听器，该函数检测是否单击了切换，然后更新相应的 foo.bar 的值。

mounted: function() {
      $(this.$refs.checkbox).bootstrapToggle().change(function(e) {
        this.foo.bar = $(e.target).prop('checked');
      }.bind(this));
},

请参阅此 JS Fiddle 以获得完整的演示: https://jsfiddle.net/eywraw8t/169950/