JSON 列作为字符串传递给视图 - Laravel - Vuejs2
JSON column passed to view as string - Laravel - Vuejs2
我正在通过 ajax/ axiom 将 Laravel 模型的数据集传递给 vuejs2 组件并渲染它。
但是,模型中有一个 JSON 列存储了一个有效的 json 对象,数据可能如下所示:{'key':'value'}
值得注意的是我由于模型上的 Mutator ( protected $casts = [ 'the_json_column' => 'array'];
)
,在 Laravel 控制器等中使用它没有问题
当我通过 axiom/ajax 将此模型传递给 vuejs 时,数组中的所有属性都像往常一样运行,我可以迭代它们并在 vuejs2 组件中呈现它们 DOM。
直到我与 'the_json_column'
交互,尽管 Laravel 的突变器作为字符串传递给 vuejs2,例如"{'key':'value'}"
每次我想与 JSON 列数据交互时,有没有比在我的 vuejs2 组件中执行 JSON.parse(data.the_json_column).key
更优雅的方法?
您可以创建自己的 Accessor,然后在检索模型之前将列转换为数组 manually
。
public function getTheJsonColumnAttribute($value)
{
return json_decode($value, true);
}
虽然看起来 laravel 在出来时只是将该列视为一个纯粹的 'string' 值,但您可以进一步验证确实存在转换。
我采用的解决方案是在 VueJS2 模板中手动解码数据 属性,
例如JSON.parse(data.key_which_is_actually_json).property_in_the_object
当 属性 通过 HTTP 传输到 VueJS2 组件时,任何基于 laravel 的代码(访问器、修改器等)都将失败,因为 VueJS2 不够智能,无法检查数据接收和解码中的属性他们。
VueJS2 似乎只解码接收到的数据中的顶级属性。
我正在通过 ajax/ axiom 将 Laravel 模型的数据集传递给 vuejs2 组件并渲染它。
但是,模型中有一个 JSON 列存储了一个有效的 json 对象,数据可能如下所示:{'key':'value'}
值得注意的是我由于模型上的 Mutator ( protected $casts = [ 'the_json_column' => 'array'];
)
当我通过 axiom/ajax 将此模型传递给 vuejs 时,数组中的所有属性都像往常一样运行,我可以迭代它们并在 vuejs2 组件中呈现它们 DOM。
直到我与 'the_json_column'
交互,尽管 Laravel 的突变器作为字符串传递给 vuejs2,例如"{'key':'value'}"
每次我想与 JSON 列数据交互时,有没有比在我的 vuejs2 组件中执行 JSON.parse(data.the_json_column).key
更优雅的方法?
您可以创建自己的 Accessor,然后在检索模型之前将列转换为数组 manually
。
public function getTheJsonColumnAttribute($value)
{
return json_decode($value, true);
}
虽然看起来 laravel 在出来时只是将该列视为一个纯粹的 'string' 值,但您可以进一步验证确实存在转换。
我采用的解决方案是在 VueJS2 模板中手动解码数据 属性,
例如JSON.parse(data.key_which_is_actually_json).property_in_the_object
当 属性 通过 HTTP 传输到 VueJS2 组件时,任何基于 laravel 的代码(访问器、修改器等)都将失败,因为 VueJS2 不够智能,无法检查数据接收和解码中的属性他们。
VueJS2 似乎只解码接收到的数据中的顶级属性。