javascript - 如何处理 Laravel 到 Vue.js 的 bool 值

Question

我有一个如下所示的输入字段:

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

集合是一个包含多个键的数组，activated 是其中之一。由于数据来自 mysql 数据库，activated 等于 1 或 0。问题在于，在这种情况下，输入字段始终设置为 true，即使 activated 等于 1 或 0。

现在，我尝试像这样编写 v-model 来解决这个问题:

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

通过添加 !!+ 我会将整数值转换为 bool 值并使用它。这解决了问题，但又产生了另一个问题。我这样做遇到的另一个问题是，当我尝试更改检查的输入时，出现错误:

[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

toggleSwitch 方法如下所示:

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

我是 Vue.js 新手，知道如何调试它以及我的问题来自哪里？我很乐意提供任何其他信息。

编辑:

这是我的组件

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

Answer 1

如果您使用 AJAX 填充您的 collection，那么您应该在注入(inject)之前在 AJAX 回调中将 0 和 1 字符串转换为 bool 值将它们放入您的组件中。或者更好的是，您可以直接从 Controller 转换它们，这样您就可以直接获得 true|false

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