我有一個如下所示的輸入字段：<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?，F在，我嘗試像這樣編寫 v-model 來解決這個問題：v-model="!!+item.activated"通過添加，!!+我會將整數值轉換為布爾值并使用它。這解決了問題，但又產生了另一個問題。我這樣做遇到的另一個問題是，當我嘗試更改檢查的輸入時，出現錯誤：[Vue warn]: Cannot set reactive property on undefined, null, or primitive value: falseadmin.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 新手，知道如何調試它以及我的問題來自哪里？我很樂意提供任何其他信息。
2 回答
浮云間
TA貢獻1829條經驗 獲得超4個贊
如果您使用 AJAX 來填充collection，那么您應該在 AJAX 回調中將0和1字符串轉換為布爾值，然后再將它們注入到組件中。或者更好的是，您可以直接從控制器轉換它們，順便說一下，您可以直接獲取true|false
data.forEach(function(entry) {
if(entry.hasOwnProperty("activated"))
entry.activated = !!+entry.activated
});
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
我的建議是：
數據庫列“已激活”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 (){
return [
{ text: 'Yes'), value: true },
{ text: 'No'), value: false }
]
}
- 2 回答
- 0 關注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消