JSON column passed to view as string - Laravel - Vuejs2

Question

I'm passing a Laravel Model's dataset to a vuejs2 component via ajax/ axiom and rendering it fine.

However, there is a JSON column in the model which stores a valid json object, the data could look like so: {'key':'value'} and it's worth noting that I'm working with it without issue in Laravel Controllers etc thanks to a Mutator on the Model ( protected $casts = [ 'the_json_column' => 'array']; )

When I pass this model to vuejs via axiom / ajax all of the properties in the array behave as usual, I can iterate over them and render them in the vuejs2 component DOM.

Until I interact with 'the_json_column' which despite Laravel's mutator is being passed to vuejs2 as a string, e.g. "{'key':'value'}"

Is there a more elegant way than doing a JSON.parse(data.the_json_column).key in my vuejs2 component every time I want to interact with the JSON column data?

Answer 1

The solution I've gone with is decoding the data property manually in the VueJS2 template,

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

Any laravel based code (accessors, mutators etc) will fail when the property is transferred to VueJS2 component over HTTP as VueJS2 isn't smart enough to check properties in data receive and decode them.

VueJS2 seems to only decode the top level of properties in data received.