Как обращаться с Laravel, чтобы Vue.js логические значения


Как обращаться с Laravel, чтобы Vue.js логические значения

16.04.2020 11:39:42 Просмотров 57 Источник

У меня есть поле ввода, которое выглядит следующим образом :

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

collection-это массив, содержащий несколько ключей, активированный один из них. activated равен 1 или 0, поскольку данные поступают из базы данных mysql. Проблема в том, что в этом случае поле ввода всегда имеет значение true, даже если activated равно 1 или 0.

Теперь я попробовал написать v-модель так, чтобы исправить эту проблему :

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 выглядит следующим образом :

collection0

Я новичок в этом деле Vue.js, есть идеи, как это отладить и откуда может взяться моя проблема? Я с радостью предоставлю любую дополнительную информацию.

Редактировать :

Вот мой компонент

collection1
У вопроса есть решение - Посмотреть?

Ответы - Как обращаться с Laravel, чтобы Vue.js логические значения / How to handle Laravel to Vue.js boolean values

Является ответом!
Shizzen83

16.04.2020 11:56:23

Если вы используете AJAX для заполнения строк collection, то вам следует преобразовать строки 0 и 1 в логические значения в обратном вызове AJAX, прежде чем вводить их в свой компонент. Или еще лучше вы можете конвертировать их непосредственно из вашего контроллера, кстати, вы непосредственно получаете true/false

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

22.10.2020 01:16:01

моя рекомендация такова:

  • Столбец базы данных "активирован" tinyint(1)
  • в фреймворк Laravel использовать модель $литого массива, чтобы бросить "активировано" на "логическое"
  • в vue используйте собственный тип boolean для form.activated с true и false

Модель Laravel:

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 }
            ]
        }
Помочь в развитии проекта:
Закрыть X