I tried to bind class attribute inside Vue component template to model's value that is expected to be true/false boolean type. When my view firstly created it get classes properly based on boolean value. But when I click on checkbox it seems to be rewrite model's value to strings not a Boolean and the class binding read false model's watch value as string and suppose it is True. For prevent it I made converting in model's update callback but I think it's not look good and can be confuses in future. Can I set Boolean values in b-form-checkbox to achieve desired behaviour without directly converting values in callback?

                    <div 
                        v-bind:
                        >
                        ...
                            <b-form-checkbox
                                v-model="coin.watch"
                                value=true
                                unchecked-value=false
                                switch
                                @change="updateWatchState(coin)"
                            >
                                Active 
                            </b-form-checkbox>
                        </div>

Code above works properly only if boolean value seated directly below:

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);
                    });
            },

One other reason why I want to get around this way is coin.watch updates twice and I think it can be reason of redrawing delay of its.

CodePudding user response：

1. value=true is not valid HTML (even though for some reason Vue compiles it just fine and behaves like in case 2.)
2. value="true" - when not using v-bind, right side is always treated as a string (as an attribute value in HTML is always string)
3. v-bind:value="true" - v-bind treats everything inside "" as a JavaScript expression - Boolean value true in this case

Last case is what you want but since it is a default both value and unchecked-value can be safely removed