b-form-checkbox v-model 作为布尔值

Question

我试图将 Vue 组件模板中的 class 属性绑定到模型的值，该值应该是 true/false 布尔类型。当我的视图首次创建时，它会根据布尔值正确获取 classes。但是当我点击复选框时，它似乎将模型的值重写为字符串而不是布尔值，并且 class 绑定将 false 模型的监视值读取为字符串并假设它为 True。为了防止它，我在模型的更新回调中进行了转换，但我认为它看起来不太好，将来可能会造成混淆。我可以在 b-form-checkbox 中设置布尔值来实现所需的行为而不直接在回调中转换值吗？

                    <div class="card mb-3"
                        v-bind:class="[coin.watch ? 'address-card' : 'address-card-inactive']"
                        >
                        ...
                            <b-form-checkbox
                                v-model="coin.watch"
                                value=true
                                unchecked-value=false
                                switch
                                @change="updateWatchState(coin)"
                            >
                                Active 
                            </b-form-checkbox>
                        </div>

只有当布尔值直接位于下面时，上面的代码才能正常工作：

methods: {
            updateWatchState: function(coin) {
                let dataRoute = '/api/balance/' + this.a1 + '/update';
                axios
                    .get(dataRoute, {
                        params : {
                            'contract_address': coin.address,
                            'name': coin.name,
                            'watch': coin.watch
                        }})
                    .then((response) => {
                        coin.watch = coin.watch == 'true'? true : false;
                        console.log('updateWatchState', coin.watch);
                    });
            },

我想以这种方式绕过的另一个原因是 coin.watch 更新两次，我认为这可能是其重绘延迟的原因。

Answer 1

value=true 无效 HTML（尽管出于某种原因 Vue 编译它很好并且表现得像案例 2。）
value="true" - 当不使用 v-bind 时，右侧始终被视为字符串（因为 HTML 中的属性值始终是字符串）
v-bind:value="true" - v-bind 将 "" 中的所有内容视为 JavaScript 表达式 - 在本例中为布尔值 true

最后一种情况是您想要的，但是由于 it is a default value 和 unchecked-value 都可以安全地删除

b-form-checkbox v-model 作为布尔值

b-form-checkbox v-model as a Boolean

twitter-bootstrap

vue.js