如何处理 Laravel 到 Vue.js 的布尔值

Question

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

<tr v-for="(item, index) in collection">

   ...

   <input 

          type="checkbox" 

          v-model="item.activated" 

          @change="toggleSwitch(item.resource_url, 'activated', item)">

   >

   ...

</tr>

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

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

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

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

[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 新手，知道如何调试它以及我的问题来自哪里？我很乐意提供任何其他信息。

Answer 1

如果您使用 AJAX 来填充collection，那么您应该在 AJAX 回调中将0和1字符串转换为布尔值，然后再将它们注入到组件中。或者更好的是，您可以直接从控制器转换它们，顺便说一下，您可以直接获取true|falsedata.forEach(function(entry) {&nbsp; &nbsp; if(entry.hasOwnProperty("activated"))&nbsp; &nbsp; &nbsp; &nbsp; entry.activated = !!+entry.activated});

Answer 2

我的建议是：数据库列“已激活”tinyint(1)在 Laravel 模型中使用 $cast 数组将“activated”转换为“boolean”在 vue 中，使用原生类型 boolean 作为 form.activated 的 true 和 false拉拉维尔模型：protected $casts = ['created_at' => 'datetime','updated_at' => 'datetime','minimum' => 'float','maximum' => 'float','step' => 'float','minItems' => 'integer','maxItems' => 'integer','uniqueItems' => 'boolean',];看法：<b-form-radio-group id="uniqueItems" v-model="formData.uniqueItems" :options="optionsBoolean" name="uniqueItems" :/>optionsBoolean (){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'Yes'), value: true },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { text: 'No'), value: false }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }