में घटकों को डेटा पास करना मैं समझने के लिए संघर्ष कर रहा हूं कि vue.js. में घटकों के बीच डेटा कैसे पास किया जाए। मैंने कई बार दस्तावेज़ों के माध्यम से पढ़ा है और कई vue संबंधित प्रश्नों और ट्यूटोरियल को देखा है, लेकिन मुझे अभी भी यह नहीं मिल रहा है।vue.js
इस के आसपास मेरे सिर लपेटो करने के लिए, मैं एक बहुत ही सरल उदाहरण
- प्रदर्शन उपयोगकर्ताओं की सूची एक घटक (किया)
- एक नया घटक जब करने के लिए उपयोगकर्ता डेटा भेजने में पूरा करने में मदद के लिए आशा करता हूं एक लिंक क्लिक किया गया है (किया गया) - नीचे अद्यतन देखें।
- उपयोगकर्ता संपादित डेटा और मूल घटक को वापस भेज (नहीं मिला है इतनी दूर)
यहाँ एक बेला, जो कदम दो पर विफल रहता है: https://jsfiddle.net/retrogradeMT/d1a8hps0/
मैं समझता हूँ कि मैं उपयोग करने की आवश्यकता नए घटक को डेटा पास करने के लिए प्रोप, लेकिन मुझे यकीन नहीं है कि इसे कार्यात्मक रूप से कैसे करें। मैं डेटा को नए घटक में कैसे बांधूं?
HTML: मुख्य घटक के लिए
<div id="page-content">
<router-view></router-view>
</div>
<template id="userBlock" >
<ul>
<li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
</li>
</ul>
</template>
<template id="newtemp" :name ="{{user.name}}">
<form>
<label>Name: </label><input v-model="name">
<input type="submit" value="Submit">
</form>
</template>
js: दूसरे घटक के लिए
Vue.component('app-page', {
template: '#userBlock',
data: function() {
return{
users: []
}
},
ready: function() {
this.fetchUsers();
},
methods: {
fetchUsers: function(){
var users = [
{
id: 1,
name: 'tom'
},
{
id: 2,
name: 'brian'
},
{
id: 3,
name: 'sam'
},
];
this.$set('users', users);
}
}
})
जे एस:
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
अद्यतन
ठीक है, मुझे दूसरा कदम पता चला है। प्रगति दिखाते हुए एक नया पहेली यहां दिया गया है: https://jsfiddle.net/retrogradeMT/9pffnmjp/
क्योंकि मैं वू-राउटर का उपयोग कर रहा हूं, मैं डेटा को नए घटक में भेजने के लिए प्रोप का उपयोग नहीं करता हूं। इसके बजाय, मुझे वी-लिंक पर सेट पैरा सेट करने की आवश्यकता है और फिर इसे स्वीकार करने के लिए एक संक्रमण हुक का उपयोग करें।
वि लिंक में परिवर्तन see named routes in vue-router docs:
Vue.component('newtemp', {
template: '#newtemp',
route: {
data: function(transition) {
transition.next({
// saving the id which is passed in url
name: transition.to.params.name
});
}
},
data: function() {
return {
name:name,
}
},
})
धन्यवाद, यह वास्तव में सहायक था। एकमात्र टुकड़ा जिसे मैं अभी भी संघर्ष कर रहा हूं, सम्मेलनों का नामकरण कर रहा है। i.e: मेरे पास user.name है जिसे मैं वी-लिंक के माध्यम से नाम के रूप में पास करता हूं। अब मैं नाम परिवर्तक को संपादित कर सकता हूं और इसे मूल घटक पर नाम के रूप में वापस भेज सकता हूं, लेकिन मूल घटक में नाम नामक एक var नहीं है। मुझे यहां क्या समझ नहीं आ रहा है? एक वस्तु को वी-लिंक के माध्यम से पास करने के लिए संभव नहीं दिखता है? – retrograde
आप पहले से ही एक ऑब्जेक्ट पास कर रहे हैं। 'पैराम्स' एक वस्तु है। नाम कुंजी को आपके घटक में 'this.user.name' को असाइन किया जा सकता है। यदि आपको मदद की ज़रूरत है, तो मुझे एक पहेली बनाएं, और मुझे बताएं। इसे देखें: http://vuejs.github.io/vue-router/en/route.html – notANerdDev
आह, ठीक है अब मुझे मिल गया है। एक बार फिर धन्यवाद। मैं आपकी मदद की सराहना करता हूं, यह वास्तव में चीजों को बहुत स्पष्ट बनाता है। – retrograde