Veriler (json) vue örneğine geçirme

Question

Basit bir Vue örneğim var ve jsonu HTTP isteği olmadan arka plandan vue geçmek istiyorum çünkü her zaman aynıdır. DOM yılında

Ben sahne ile bunu denedim ama çalışmıyor ... <div id="my-component" prices="[object Object]"> Vue ayıklama aracı boş bir dize olarak bana resim göstermek ve konsolda gibi görünüyor oluyor undefined

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

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

Burada $prices json kodlu dizi.

Answer 1

Çözümün neredeyse yoktu ama yerine bir veri niteliği kullanabilir ve üzeri JSON atamak, bir aksesuar gerekmez Metod:

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>

sadece setJson yöntemleri yük için laravel verilerini atamak istiyorum, yani

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

Answer 2

Bunun için herhangi bir Laravel yardımcı olup olmadığını bilmiyorum ama genel bir yaklaşım sunacağım.

JSON verilerini global bir değişkende depolamak ve sayfa yüklenip js dosyalarınızda kullanmak bir seçenek olacaktır. Vue bileşeni başlatılırken zaman myApp.userData değişkeni erişmek ve kullanmak gerekir javascript dan Sonra

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

:

Temel olarak benzer bazı html oluşturmak gerekir. İşte

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

bir örnek:

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>