Столбец JSON передается для просмотра в виде строки - Laravel - Vuejs2

Я передаю набор данных модели Laravel компоненту vuejs2 через ajax/axiom и отрисовываю его нормально.

Однако в модели есть столбец JSON, в котором хранится допустимый объект json, данные могут выглядеть так: {'key':'value'} и стоит отметить, что я без проблем работаю с ним в контроллерах Laravel и т. д. благодаря мутатору в модели ( protected $casts = [ 'the_json_column' => 'array']; )

Когда я передаю эту модель в vuejs через axiom/ajax, все свойства в массиве ведут себя как обычно, я могу перебирать их и отображать в DOM компонента vuejs2.

Пока я не взаимодействую с 'the_json_column', который, несмотря на мутатор Laravel, передается vuejs2 в виде строки, например. "{'key':'value'}"

Есть ли более элегантный способ, чем делать JSON.parse(data.the_json_column).key в моем компоненте vuejs2 каждый раз, когда я хочу взаимодействовать с данными столбца JSON?


json laravel vuejs2 multidimensional-array mutators
person Lewis    schedule 02.03.2018    source источник
comment
вы можете использовать Laravel Eloquent: ресурсы API, это очень полезно для подобных ситуаций.   -  person Maraboc    schedule 02.03.2018
comment
Можете ли вы разобрать строку json в php как ассоциативный массив? Затем вы можете просто передать это массив в представление.   -  person Udayraj Deshmukh    schedule 02.03.2018
comment
Как выглядит часть контроллера? У меня была эта проблема при отображении JSON из столбца JSON из MySQL. Я использовал ->map, чтобы преобразовать его в массив.   -  person Anuga    schedule 26.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Решение, которое я использовал, - это декодирование свойства данных вручную в шаблоне VueJS2,

e.g. JSON.parse(data.key_which_is_actually_json).property_in_the_object

Любой код на основе laravel (аксессоры, мутаторы и т. д.) не будет работать, когда свойство будет передано компоненту VueJS2 через HTTP, поскольку VueJS2 недостаточно умен, чтобы проверять свойства в получаемых данных и декодировать их.

VueJS2, кажется, декодирует только верхний уровень свойств в полученных данных.

person Lewis    schedule 07.03.2018

arrow_upward
0
arrow_downward

Вы можете создать свой собственный Accessor, а затем преобразовать столбец в массив manually перед получением модели.

public function getTheJsonColumnAttribute($value)
{
    return json_decode($value, true);
}

Хотя может показаться, что laravel просто обработал этот столбец как простое «строковое» значение при выводе, вы можете дополнительно проверить, что преобразование действительно имеет место.

person Oluwatobi Samuel Omisakin    schedule 02.03.2018
comment
Это не сработает, потому что свойство уже существует в виде массива в PHP — это передача по http от Laravel к компоненту VueJS2, который преобразует его в строку, а VueJS2 недостаточно умен, чтобы автоматически декодировать свойства, которые выглядят как действительный json . - person Lewis; 07.03.2018