उदाहरण के लिए डेटा (जेसन) को पास करने के लिए कैसे करें

Question

मेरे पास एक साधारण वू इंस्टेंस है और बिना किसी HTTP अनुरोध के बैकएंड से जेसन को पास करना चाहता है क्योंकि यह हमेशा वही होता है।

मैं रंगमंच की सामग्री के साथ ऐसा कर की कोशिश की है, लेकिन यह काम नहीं करता है ... डोम में तरह <div id="my-component" prices="[object Object]"> Vue डिबग उपकरण मुझे एक खाली स्ट्रिंग के रूप में छवि दिखाने के लिए, और कंसोल में यह लग रहा है undefined

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

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

जहां $prices जेसन एन्कोडेड सरणी।

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

मुझे नहीं पता कि इसके लिए कोई लैरावेल सहायक है लेकिन मैं एक सामान्य दृष्टिकोण पेश करूंगा।

एक विकल्प आपको वैश्विक चर में जेएसओएन डेटा स्टोर करना होगा और पृष्ठ लोड करना होगा और फिर इसे अपनी जेएस फाइलों में उपयोग करना होगा।

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

फिर जावास्क्रिप्ट से आप myApp.userData चर पहुँच सकते हैं और इसका इस्तेमाल करने में सक्षम जब Vue घटक आरंभ किया जाना चाहिए:

मूल रूप से आप कुछ 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>