How to handle Laravel to Vue.js boolean values

Question

I've got an input field that looks like the following:

<tr v-for="(item, index) in collection">
   ...
   <input 
          type="checkbox" 
          v-model="item.activated" 
          @change="toggleSwitch(item.resource_url, 'activated', item)">
   >
   ...
</tr>

The collection is an array containing several keys, activated is one of them. activated is equal to 1 or 0 as the data is coming from a mysql database. The problem is that the input field is always set to true in this case, even if the activated is equal to 1 or 0.

Now, I tried writing the v-model like so to fix the issue:

v-model="!!+item.activated"

as by adding !!+ I'd convert the integer value to a boolean and use that. That fixes the issue, but creates another. The other issue I get by doing so is when I try to change my checked input I get an error:

[Vue warn]: Cannot set reactive property on undefined, null, or primitive value: false
admin.js:120238 TypeError: Cannot use 'in' operator to search for 'activated' in false

The toggleSwitch method looks like this:

toggleSwitch: function toggleSwitch(url, col, row) {
    var _this8 = this;

    axios.post(url, row).then(function (response) {
        _this8.$notify({ type: 'success' });
    }, function (error) {
        row[col] = !row[col];
        _this8.$notify({ type: 'error' });
    });
},

I'm new to Vue.js, any idea how to debug this and where could my problem be coming from? I'll gladly give any additional info.

Edit:

Here's my component

Vue.component('profile-edit-profile-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                ...
                activated:  false ,
                ...
            }
        }
    }
});

Answer 1

If you use AJAX to populate your collection , then you should convert your 0 and 1 strings to booleans in your AJAX callback before injecting them into your component. Or even better you could convert them directly from your controller, by the way you directly get true | false

data.forEach(function(entry) {
    if(entry.hasOwnProperty("activated"))
        entry.activated = !!+entry.activated
});

Answer 2

my recommendation is:

• Database column "activated" tinyint(1)
• in laravel model use $cast array to cast "activated" to "boolean"
• in vue use native type boolean for form.activated with true and false

Laravel Model:

protected $casts = [
'created_at' => 'datetime',
'updated_at' => 'datetime',
'minimum' => 'float',
'maximum' => 'float',
'step' => 'float',
'minItems' => 'integer',
'maxItems' => 'integer',
'uniqueItems' => 'boolean',
];

Vue:

<b-form-radio-group id="uniqueItems" v-model="formData.uniqueItems" :options="optionsBoolean" name="uniqueItems" :/>

optionsBoolean (){
            return [
                { text: 'Yes'), value: true },
                { text: 'No'), value: false }
            ]
        }