传递到视图为Vuejs2的JSON列

Question

我正在通过ajax/ axiom将Laravel的数据集传递给vuejs2组件，并将其很好地呈现出来。

但是，模型中有一个JSON列，它存储了一个有效的json对象，数据看起来可能是这样的：{'key':'value'}，值得注意的是，我在Laravel控制器等方面没有出现问题，这要感谢模型上的Mutator ( protected $casts = [ 'the_json_column' => 'array']; )

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

直到我与'the_json_column'交互，尽管Laravel的mutator被作为字符串传递给vuejs2，例如"{'key':'value'}"

有比每次我想要与JSON列数据交互时在我的JSON.parse(data.the_json_column).key组件中执行一个JSON.parse(data.the_json_column).key更优雅的方法吗？

Answer 1

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

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

当属性通过HTTP传输到VueJS2组件时，任何基于laravel的代码(访问器、变异器等)都会失败，因为VueJS2不够聪明，无法在数据接收和解码中检查属性。

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

Answer 2

您可以创建自己的存取者，然后在检索模型之前将列转换为数组manually。

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

虽然在出炉时，laravel可能只是将该列视为“string”值，但您可以进一步验证确实存在转换。