JSON 列作为字符串传递给 View - Laravel - Vuejs2

标签 json laravel multidimensional-array vuejs2 mutators

我正在通过 ajax/axiom 将 Laravel 模型的数据集传递给 vuejs2 组件并渲染它。

但是,模型中有一个存储有效 json 对象的 JSON 列,数据可能如下所示:{'key':'value'} 值得注意的是我'由于模型上的 Mutator(protected $casts = [ 'the_json_column' => 'array']; ),我在 Laravel Controllers 等中使用它没有问题

当我通过 axiom/ajax 将此模型传递给 vuejs 时,数组中的所有属性都像往常一样运行,我可以迭代它们并将它们呈现在 vuejs2 组件 DOM 中。

直到我与 'the_json_column' 交互,尽管 Laravel 的修改器正在作为字符串传递给 vuejs2,例如“{'key':'value'}”

每次我想与 JSON 列数据交互时,是否有比在我的 vuejs2 组件中执行 JSON.parse(data.the_json_column).key 更优雅的方法?

最佳答案

我采用的解决方案是在 VueJS2 模板中手动解码数据属性,

例如JSON.parse(data.key_which_is_actually_json).property_in_the_object

当属性通过 HTTP 传输到 VueJS2 组件时,任何基于 Laravel 的代码(访问器、修改器等)都将失败,因为 VueJS2 不够智能,无法检查数据中的属性接收和解码它们。

VueJS2 似乎只解码接收到的数据中的顶级属性。

关于JSON 列作为字符串传递给 View - Laravel - Vuejs2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49066756/

相关文章:

java - 尝试使用 java 运行 sql 查询时出现 406 错误

php - Laravel 路由与闭包和名称

javascript - 从 AJAX laravel 获取 http ://localhost/scl-mgt-update/fetch? type=teacher 500(内部服务器错误)

php - Laravel 5.5 试图获取非对象的属性 'id'

python - 替换大型数组数据集中的所有 nan 值

javascript - 在多级对象数组上使用过滤器?

python - Flask 中的 POST 请求和 Content-Type "application/json"无响应

javascript - JSON 到 Tabulator 表 - Javascript

javascript求和多维数组

json - Golang 中的深度复制 map