VueJS

2017-03-16 28 views
5

प्रस्तुत करने के माध्यम से डेटा पास कर रहा है मैं वर्तमान में VueJS 2 के साथ काम कर रहा हूं, मैं HTML से कुछ पैरा को VueJS घटक में पास करना चाहता हूं। चलो मैं तुम्हें दिखाती हूँ।VueJS

मेरे html div इस तरह दिखता है:

<div id="app" :id="1"></div> 

और मेरे जावास्क्रिप्ट:

new Vue({ 
    store, // inject store to all children 
    el: '#app', 
    render: h => h(App) 
}); 

मेरे एप्लिकेशन घटक:

<template> 
    <div> 
    {{ id }} 
    </div> 
</template> 
<script> 
export default { 
    props: { 
    id: Number 
    } 
} 
</script> 

मैं चाहूँगा आईडी में पारित करने के लिए एचटीएमएल, मेरे ऐप घटक में। मुझे कैसे करना चाहिए?

+1

आईडी प्रोप के लिए एक अच्छा नाम नहीं है, क्योंकि यह पहले से ही एक विशेषता है। –

उत्तर

3

यहां एक तरीका है।

<div id="app" data-initial-value="125"></div> 

new Vue({ 
    el: '#app', 
    render: h => h(App, { 
    props:{ 
     id: document.querySelector("#app").dataset.initialValue 
    } 
    }) 
}) 

लेकिन आपको रेंडर फ़ंक्शन का उपयोग करने की आवश्यकता नहीं है।

new Vue({ 
    el: '#app', 
    template:"<app :id='id'></app>", 
    data:{ 
    id: document.querySelector("#app").dataset.initialValue 
    }, 
    components:{ 
    App 
    } 
}) 

इसके अलावा, मैं querySelector उपयोग कर रहा हूँ यह सोचते हैं आप एक विशेषता के रूप में पृष्ठ पर (id के बजाय) initialValue प्रदान की गई है, लेकिन आप बस के रूप में आसानी से इसे कहीं और पृष्ठ पर एक छिपे हुए इनपुट या कुछ और की तरह डाल सकता है। वास्तव में कोई फर्क नहीं पड़ता।

+1

मुझे इसे काम करने में परेशानी हो रही थी, लेकिन ऐसा लगता है कि अगर नए Vue() से पहले एक पंक्ति पर विशेषता के मान को पुनर्प्राप्त किया गया है, तो इसे एक चर के रूप में संग्रहीत किया गया है, और चर मूल्य को संपत्ति मान के रूप में पास किया गया है – Zak

संबंधित मुद्दे