데이터 (json)를 vue 인스턴스에 전달하는 방법

Question

간단한 Vue 인스턴스가 있고 항상 같은 이유로 HTTP 요청없이 jend를 vend에 전달하려고합니다. DOM에서

나는 소품이 작업을 수행하려고했지만, 그것은 작동하지 않습니다 ... <div id="my-component" prices="[object Object]"> 뷰 디버그 도구가 빈 문자열로 나에게 이미지를 보여주고, 콘솔처럼 보이는 것 undefined

<div id="my-component" :prices="{{ $prices }}"> 
</div> 

<script> 
     new Vue({ 
      el: '#my-component', 
      props: ['prices'], 
      mounted: function() { 
       console.log(this.image); 
      }, 
     }); 
</script> 

여기서 $prices json 인코딩 된 배열.

Answer 1

당신의 솔루션은 거의가 있었다 그러나 당신은 오히려 데이터 속성을 사용하고를 통해 JSON을 할당 소품이 필요하지 않습니다 방법 :

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     json: {}, 
 
    }, 
 
    methods: { 
 
    \t setJson (payload) { 
 
     \t this.json = payload 
 
     }, 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app" :json="setJson({ foo: 'bar' })"> 
 
    <pre>{{ json }}</pre> 
 
</div>

당신은 단지 setJson 방법 페이로드에 Laravel 데이터를 할당하는 것, 즉

:json="setJson({{ $prices }}) 

Answer 2

여기에 Laravel 도우미가 있는지 모르겠지만 일반적인 접근 방식을 제시 할 것입니다.

하나의 옵션은 JSON 데이터를 전역 변수에 저장하고 페이지를로드 한 다음 js 파일에서 사용하는 것입니다. 뷰 구성 요소를 초기화 할 때 myApp.userData 변수를 액세스하여 사용할 수 있어야합니다 자바 스크립트에서 다음

<script> 
window.myApp = window.myApp || {}; 
window.myApp.userData = { "firstName": "John", "lastName": "Doe" }; 
</script> 

:

은 기본적으로 다음과 유사한 일부 HTML을 생성해야합니다. 여기

new Vue({ 
    el: '#app', 
    data: { 
     userData: myApp.userData 
    } 
}); 

은 예입니다

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    userData: myApp.userData 
 
    } 
 
});

<script> 
 
    window.myApp = window.myApp || {}; 
 
    window.myApp.userData = { "firstName": "John", "lastName": "Doe" }; 
 
</script> 
 

 

 
<div id="app"> 
 
    Hello {{userData.firstName}} 
 
</div> 
 

 
<script src="https://unpkg.com/vue/dist/vue.js"></script>