VueJS पैरेंट डेटा को बदले बिना प्रोप संपादित करने का सही तरीका

Question

मेरे मूल vue घटक में मेरे पास user ऑब्जेक्ट है।

अगर मैं एक आधार के रूप में एक बच्चे के घटक है कि उपयोगकर्ता वस्तु पारित:

<child :user="user"></child> 

और मेरे बच्चे घटक में मैं अद्यतन user.name, यह माता-पिता के साथ-साथ अपडेट कर दिया जाएगा।

मैं मूल घटक में मौजूद उपयोगकर्ता ऑब्जेक्ट में दिखाई देने वाले परिवर्तनों के बिना बाल घटक में उपयोगकर्ता ऑब्जेक्ट को संपादित करना चाहता हूं।

क्या ऑब्जेक्ट को क्लोन करने से इसे प्राप्त करने का कोई बेहतर तरीका है: JSON.parse(JSON.stringify(obj))?

Answer 1

आपको JSON ऑब्जेक्ट का उपयोग करने की आवश्यकता नहीं है।

const child = { 
    props:["user"], 
    data(){ 
    return { 
     localUser: Object.assign({}, this.user) 
    } 
    } 
} 

localUser उपयोग (या जो भी आप इसे कॉल करना चाहते हैं) अपने बच्चे के अंदर।

संपादित

मैं इस सवाल का एक बेला एक और जवाब के लिए बनाई गई संशोधित किया था इसके बाद के संस्करण की अवधारणा और @ user3743266 पूछा

मैं पकड़ के लिए इस के साथ अपने आप आ रहा हूँ प्रदर्शित करने के लिए, और मैं मुझे यह बहुत उपयोगी लगता है। आपका उदाहरण अच्छी तरह से काम करता है। बच्चे में, आपने डेटा में तत्व बनाया है जो प्रोप की प्रतिलिपि लेता है, और बच्चे प्रतिलिपि के साथ काम करता है। दिलचस्प और उपयोगी, लेकिन ... यह मुझे स्पष्ट नहीं है जब स्थानीय प्रति अभिभावक को संशोधित करता है तो स्थानीय प्रति अपडेट हो जाती है। मैंने आपके पहेली को संशोधित किया, v-ifs को हटा दिया ताकि सबकुछ दिखाई दे, और संपादन घटक को डुप्लिकेट कर रहा हो। यदि आप एक घटक में नाम संशोधित करते हैं, तो दूसरा अनाथ है और इसमें कोई परिवर्तन नहीं होता है?

वर्तमान घटक इस तरह दिखता है:

Vue.component('edit-user', { 
    template: ` 
    <div> 
    <input type="text" v-model="localUser.name"> 
    <button @click="$emit('save', localUser)">Save</button> 
    <button @click="$emit('cancel')">Cancel</button> 
    </div> 
    `, 
    props: ['user'], 
    data() { 
    return { 
     localUser: Object.assign({}, this.user) 
    } 
    } 
}) 

क्योंकि मैं उपयोग करने के लिए एक स्थानीय कॉपी उपयोगकर्ता की डिजाइन निर्णय लिया, @ user3743266 सही है, तो घटक अपने आप अपडेट नहीं किया गया है। संपत्तिuser अपडेट किया गया है, लेकिन localUser नहीं है। इस मामले में, यदि जब भी संपत्ति बदल जाती है तो आप स्वचालित रूप से स्थानीय डेटा अपडेट करना चाहते थे, आपको एक वॉचर की आवश्यकता होगी।

Vue.component('edit-user', { 
    template: ` 
    <div> 
    <input type="text" v-model="localUser.name"> 
    <button @click="$emit('save', localUser)">Save</button> 
    <button @click="$emit('cancel')">Cancel</button> 
    </div> 
    `, 
    props: ['user'], 
    data() { 
    return { 
     localUser: Object.assign({}, this.user) 
    } 
    }, 
    watch:{ 
    user(newUser){ 
     this.localUser = Object.assign({}, newUser) 
    } 
    } 
}) 

यहां अद्यतन fiddle है।

यह स्थानीय डेटा को अपडेट या उत्सर्जित करने पर आपको पूर्ण नियंत्रण की अनुमति देता है। उदाहरण के लिए, आप स्थानीय स्थिति को अपडेट करने से पहले एक शर्त जांचना चाहेंगे।

watch:{ 
    user(newUser){ 
     if (condition) 
     this.localUser = Object.assign({}, newUser) 
    } 
    } 

जैसा कि मैंने कहीं और कहा, कई बार जब आप वस्तुओं गुण परिवर्तनशील होने का लाभ लेने के लिए चाहते हो सकता है कर रहे हैं, लेकिन वहां भी इस तरह बार जहां अधिक नियंत्रण चाहते हो सकता है कर रहे हैं।

Answer 2

According to this, बच्चे अपने माता-पिता के डेटा को "नहीं कर सकते" और "नहीं" चाहिए। लेकिन here आप देख सकते हैं कि यदि कोई माता-पिता किसी बच्चे को संपत्ति के रूप में कुछ प्रतिक्रियाशील डेटा पास करता है, तो यह पास-दर-संदर्भ है और माता-पिता बच्चे के परिवर्तन देखता है। शायद यही वह समय है जो आप अधिकतर समय चाहते हैं, नहीं? आप केवल उस डेटा को संशोधित कर रहे हैं जिसे अभिभावक ने स्पष्ट रूप से साझा किया है। यदि आप चाहते हैं कि बच्चे user की एक स्वतंत्र प्रतिलिपि प्राप्त करे, तो आप शायद JSON.parse (JSON.stringify()) के साथ ऐसा कर सकते हैं लेकिन सावधान रहें कि आप वू-इंजेक्शन गुणों को क्रमबद्ध कर देंगे। आप कब करेंगे याद रखें प्रोप प्रतिक्रियाशील हैं, इसलिए माता-पिता स्थानीय परिवर्तनों को मिटाकर किसी भी समय एक नया उपयोगकर्ता भेज सकते हैं?

शायद आपको हमें यह बताना होगा कि आप बच्चे को अपनी प्रतिलिपि क्यों लेना चाहते हैं? बच्चा अपनी प्रतिलिपि के साथ क्या करने जा रहा है? यदि बच्चे का उपयोगकर्ता कुछ व्यवस्थित तरीके से मूल उपयोगकर्ता से लिया गया है (सभी पाठ या कुछ को अपरकेस करना), गणना की गई गुणों पर एक नज़र डालें।

Answer 3

तुम सिर्फ जानकारी आप स्थानीय रूप से संपादन योग्य हो सकता है और इस तरह से आप यह जो डेटा आप संपादन कर रहे के स्पष्ट रखना बनाई गई विधि

data() { 
return { localUserData: {name: '', (...)} 
} 
(...) 
created() { 
    this.localUserData.name = this.user.name; 
} 

में मूल्य लोड करना चाहते हैं के साथ एक डेटा चर हो सकता है। आवश्यकता के आधार पर, यदि उपयोगकर्ता प्रोप बदलता है तो आप स्थानीय डेटा को अपडेट करने के लिए एक वॉचर रखना चाह सकते हैं।