문자열로 표시되도록 전달된 JSON 열 - Larabel - Vuejs2

문자열로 표시되도록 전달된 JSON 열 - Larabel - Vuejs2

Laravel Model의 데이터 세트를 ajax/ aciom을 통해 vuejs2 컴포넌트에 전달하고 있습니다.

그러나 모델에는 유효한 json 객체를 저장하는 JSON 열이 있습니다.데이터는 다음과 같습니다.{'key':'value'}Mutator on the Model 덕분에 Laravel Controllers 등에서 문제없이 작업할 수 있게 되었습니다.(protected $casts = [ 'the_json_column' => 'array'];)

이 모델을 aciom/ajax를 통해 vuejs에 전달하면 어레이 내의 모든 속성이 정상적으로 동작합니다.이러한 속성을 반복하여 vuejs2 컴포넌트 DOM으로 렌더링할 수 있습니다.

내가 와 소통할 때까지'the_json_column'라라벨의 돌연변이에도 불구하고 vuejs2에 문자열로 전달되고 있습니다."{'key':'value'}"

더 우아한 방법은 없을까?JSON.parse(data.the_json_column).key내 vuejs2 컴포넌트에서 JSON 열 데이터와 상호 작용하려면 어떻게 해야 합니까?

제가 사용한 솔루션은 VueJS2 템플릿에서 데이터 속성을 수동으로 디코딩하는 것입니다.

예.JSON.parse(data.key_which_is_actually_json).property_in_the_object

VueJS2는 데이터의 수신 및 디코딩 속성을 확인할 수 없을 정도로 스마트하지 않기 때문에 HTTP를 통해 속성을 VueJS2 컴포넌트로 전송하면 라라벨 기반 코드(액세서, 뮤터 등)는 실패합니다.

VueJS2는 수신된 데이터 속성의 최상위 수준만 디코딩하는 것 같습니다.

독자적인 접근자를 작성한 후 열을 배열로 변환할 수 있습니다.manually모델을 검색하기 전에.

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

이 컬럼을 단순히 '문자열' 값으로 취급하는 것처럼 보일 수 있지만 변환이 실제로 존재함을 더욱 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/49066756/json-column-passed-to-view-as-string-laravel-vuejs2