Vue 2 - उत्परिवर्तन सहारा vue-चेतावनी

Question

मैंने https://laracasts.com/series/learning-vue-step-by-step सीरीज़ शुरू की । मैं इस त्रुटि के साथ Vue, Laravel और AJAX के पाठ पर रुक गया :

vue.js: 2574 [Vue चेतावनी]: जब भी मूल घटक फिर से रेंडर करता है, तो मूल्य को ओवरराइट कर दिया जाएगा क्योंकि सीधे एक प्रोप को बदलने से बचें। इसके बजाय, प्रोप के मूल्य के आधार पर डेटा या कंप्यूट की गई संपत्ति का उपयोग करें। उत्परिवर्तित किया जा रहा है: "सूची" (घटक में पाया गया)

मेरे पास यह कोड main.js में है

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

मुझे पता है कि समस्या प्रॉम्प्ट () में है जब मैं सूची प्रोप को अधिलेखित करता हूं, लेकिन मैं Vue में नौसिखिया हूं, इसलिए मुझे पूरी तरह से पता नहीं है कि इसे कैसे ठीक किया जाए। किसी को भी एक विचार है कि कैसे (और कृपया समझाएं क्यों) इसे ठीक करने के लिए?

Comments

लगता है, यह सिर्फ एक चेतावनी संदेश है और एक त्रुटि नहीं है।

— डेविड आर

Answer 1

यह इस तथ्य के साथ करना है कि स्थानीय रूप से एक प्रस्ताव को बदलना Vue 2 में एक विरोधी पैटर्न माना जाता है

अब आपको क्या करना चाहिए, यदि आप स्थानीय रूप से किसी प्रोप को बदलना चाहते हैं, तो अपने क्षेत्र में एक ऐसा क्षेत्र घोषित करना है dataजो propsमूल्य को उसके प्रारंभिक मूल्य के रूप में उपयोग करता है और फिर कॉपी को म्यूट करता है:

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

आप इसके बारे में Vue.js के आधिकारिक गाइड पर अधिक पढ़ सकते हैं

---

नोट 1: कृपया ध्यान दें कि आपको अपने औरpropdata , के लिए एक ही नाम का उपयोग नहीं करना चाहिए :

data: function () { return { list: JSON.parse(this.list) } // WRONG!!

नोट 2: चूंकि मुझे लगता है कि प्रतिक्रियाprops और प्रतिक्रिया के संबंध में कुछ भ्रम है , इसलिए मेरा सुझाव है कि आप इस धागे पर एक नज़र डालें

Comments

यह एक शानदार उत्तर है, लेकिन मुझे यह भी लगता है कि इवेंट बाइंडिंग को शामिल करने के लिए इसे अपडेट किया जाना चाहिए। बच्चे से शुरू होने वाली एक घटना माता-पिता को अपडेट कर सकती है, जो बच्चे को अपडेट किए गए प्रॉपर पास करेगा। इस तरह, सत्य का स्रोत अभी भी सभी घटकों में बना हुआ है। यह कई घटकों में साझा किए गए राज्य के प्रबंधन के लिए Vuex का उल्लेख करने के लायक हो सकता है।

— वेस हार्पर

@EsHarper, माता-पिता की अद्यतन घटना को स्वचालित रूप से प्राप्त करने के लिए एक शॉर्टहैंड के रूप में .sync संशोधक का उपयोग करना संभव है ।

— danb4r

Answer 2

Vue पैटर्न propsनीचे और eventsऊपर है। यह सरल लगता है, लेकिन कस्टम घटक लिखते समय भूलना आसान है।

Vue 2.2.0 के रूप में आप वी-मॉडल ( कम्प्यूटेड गुणों के साथ ) का उपयोग कर सकते हैं । मैंने पाया है कि यह संयोजन घटकों के बीच एक सरल, स्वच्छ और सुसंगत इंटरफ़ेस बनाता है:

• propsआपके घटक में कोई भी प्रतिक्रियाशील रहता है (अर्थात, इसका क्लोन नहीं है और न ही इसे watchस्थानीय प्रतिलिपि को अपडेट करने के लिए फ़ंक्शन की आवश्यकता होती है जब परिवर्तन का पता लगाया जाता है)।
• परिवर्तन स्वचालित रूप से जनक के लिए उत्सर्जित होते हैं।
• घटकों के कई स्तरों के साथ इस्तेमाल किया जा सकता है।

एक गणना की गई संपत्ति सेटर और गेट्टर को अलग-अलग परिभाषित करने की अनुमति देती है। यह Taskघटक को निम्नानुसार फिर से लिखने की अनुमति देता है:

Vue.component('Task', {
    template: '#task-template',
    props: ['list'],
    model: {
        prop: 'list',
        event: 'listchange'
    },
    computed: {
        listLocal: {
            get: function() {
                return this.list
            },
            set: function(value) {
                this.$emit('listchange', value)
            }
        }
    }
})  

मॉडल संपत्ति परिभाषित करता है जो propसाथ जुड़ा हुआ है v-modelजो घटना, और परिवर्तन पर उत्सर्जित कर दिया जाएगा। आप इस घटक को माता-पिता से इस प्रकार कह सकते हैं:

<Task v-model="parentList"></Task>

listLocalगणना की गई संपत्ति घटक के भीतर एक साधारण गेट्टर और सेटर इंटरफेस प्रदान करती है (इसे निजी चर होने की तरह सोचें)। भीतर #task-templateआप रेंडर कर सकते हैं listLocalऔर यह प्रतिक्रियाशील रहेगा (यानी, यदि parentListपरिवर्तन यह Taskघटक को अपडेट करेगा )। आप listLocalसेटर को कॉल करके भी म्यूट कर सकते हैं (उदाहरण के लिए this.listLocal = newList) , और यह माता-पिता के लिए परिवर्तन का उत्सर्जन करेगा।

इस पैटर्न के बारे में बहुत अच्छी बात यह है कि आप (का उपयोग कर ) के listLocalएक बच्चे के घटक को पास कर सकते हैं , और बच्चे के घटक से परिवर्तन शीर्ष स्तर के घटक को प्रचारित करेंगे।Taskv-model

उदाहरण के लिए, मान लें कि हमारे पास EditTaskकार्य डेटा में कुछ प्रकार के संशोधन करने के लिए एक अलग घटक है। उसी v-modelऔर गणना किए गए गुण पैटर्न का उपयोग करके हम listLocalघटक (उपयोग v-model) को पास कर सकते हैं :

<script type="text/x-template" id="task-template">
    <div>
        <EditTask v-model="listLocal"></EditTask>
    </div>
</script>

यदि EditTaskएक परिवर्तन का उत्सर्जन करता है तो यह उचित रूप से कॉल set()करेगा listLocalऔर इस तरह घटना को शीर्ष स्तर पर प्रचारित करेगा। इसी तरह, EditTaskघटक अन्य बाल घटकों (जैसे फार्म तत्व) का उपयोग करके भी कॉल कर सकता है v-model।

Comments

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

— koga73

मुझे शक है कि सेटर को कॉल करने से अच्छा अभ्यास नहीं होता। आप जिस पर विचार कर सकते हैं, वह आपकी गणना की गई संपत्ति पर नजर रख रहा है और आपके तर्क को जोड़ रहा है।

— क्रिस

नीचे सहारा और घटनाओं को मेरे साथ क्लिक किया गया है। इसे VJJ के डॉक्स में कहाँ समझाया गया है?

— नेबुलसगर्ल

@nebulousGirl यहाँ एक नज़र है: vuejs.org/v2/guide/compenders-props.html#One-Way-Data-Flow

— chris

मुझे लगता है कि यह मूल घटक में परिवर्तन का उत्सर्जन करने का अधिक दर्द रहित तरीका है।

— मुहम्मद

Answer 3

Vue आपको चेतावनी देता है: आप घटक में प्रोप को बदलते हैं, लेकिन जब मूल घटक पुन: रेंडर करता है, तो "सूची" ओवरराइट हो जाएगी और आप अपने सभी परिवर्तन खो देंगे। इसलिए ऐसा करना खतरनाक है।

इसके स्थान पर गणना की गई संपत्ति का उपयोग करें:

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    computed: {
        listJson: function(){
            return JSON.parse(this.list);
        }
    }
});

Comments

बाइंडिंग प्रॉप के बारे में 2 तरीका क्या है?

— जोश आर।

यदि आप 2 तरह से डेटा बाइंडिंग चाहते हैं, तो आपको कस्टम इवेंट्स का उपयोग करना चाहिए, अधिक जानकारी के लिए पढ़ें: vuejs.org/v2/guide/compords.html#sync-Modifier अभी भी आप सीधे प्रोप को संशोधित नहीं कर सकते हैं, आपको एक ईवेंट और फ़ंक्शन की आवश्यकता है आपके लिए एक प्रोपर बदलाव को हैंडल करता है।

— मार्को

Answer 4

यदि आप लॉडश का उपयोग कर रहे हैं, तो आप इसे वापस करने से पहले प्रोप को क्लोन कर सकते हैं। यदि आप उस प्रॉप को माता-पिता और बच्चे दोनों पर संशोधित करते हैं तो यह पैटर्न सहायक है।

मान लें कि हमारे पास घटक ग्रिड पर प्रोप सूची है ।

जनक घटक में

<grid :list.sync="list"></grid>

बाल घटक में

props: ['list'],
methods:{
    doSomethingOnClick(entry){
        let modifiedList = _.clone(this.list)
        modifiedList = _.uniq(modifiedList) // Removes duplicates
        this.$emit('update:list', modifiedList)
    }
}

Answer 5

प्रॉप्स नीचे, घटनाएँ। वो है Vue का पैटर्न। मुद्दा यह है कि यदि आप माता-पिता से गुजरने वाले सहारा को बदलने की कोशिश करते हैं। यह काम नहीं करेगा और यह सिर्फ मूल घटक द्वारा बार-बार ओवरराइट किया जाता है। चाइल्ड कंपोनेंट केवल sth करने के लिए पैरेंट घटक को सूचित करने के लिए एक घटना का उत्सर्जन कर सकता है। यदि आप इन प्रतिबंधों को पसंद नहीं करते हैं, तो आप VUEX का उपयोग कर सकते हैं (वास्तव में यह पैटर्न जटिल घटकों की संरचना में चूसना होगा, आपको VUEX का उपयोग करना चाहिए!)

Comments

इवेंट बस का उपयोग करने का एक विकल्प भी है

— स्टीवन प्रिबिलिनस्की

घटना बस मूल रूप से vue में समर्थित नहीं है। github.com/vuejs/rfcs/pull/118

— एलेक्सा

Answer 6

आपको बच्चे के घटक में रंगमंच की सामग्री का मूल्य नहीं बदलना चाहिए। यदि आपको वास्तव में इसे बदलने की आवश्यकता है तो आप इसका उपयोग कर सकते हैं .sync। सिर्फ इस तरह

<your-component :list.sync="list"></your-component>

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.$emit('update:list', JSON.parse(this.list))
    }
});
new Vue({
    el: '.container'
})

Answer 7

VueJs 2.0 के अनुसार, आपको घटक के अंदर एक प्रोप को बदलना नहीं चाहिए। वे केवल अपने माता-पिता द्वारा उत्परिवर्तित होते हैं। इसलिए, आपको अलग-अलग नामों के साथ डेटा में वेरिएबल को परिभाषित करना चाहिए और वास्तविक प्रॉप्स को देखकर उन्हें अपडेट रखना चाहिए। यदि माता-पिता द्वारा सूची में परिवर्तन किया जाता है, तो आप इसे पार्स कर सकते हैं और इसे म्यूटेबलिस्ट को सौंप सकते हैं। यहाँ एक पूर्ण समाधान है।

Vue.component('task', {
    template: ´<ul>
                  <li v-for="item in mutableList">
                      {{item.name}}
                  </li>
              </ul>´,
    props: ['list'],
    data: function () {
        return {
            mutableList = JSON.parse(this.list);
        }
    },
    watch:{
        list: function(){
            this.mutableList = JSON.parse(this.list);
        }
    }
});

यह आपके टेम्प्लेट को रेंडर करने के लिए उत्परिवर्तनीय का उपयोग करता है, इस प्रकार आप घटक में अपनी सूची को सुरक्षित रखते हैं।

Comments

क्या इस्तेमाल किया जाना महंगा नहीं है?

— किक बटोस्की

Answer 8

सीधे तौर पर प्रॉम्प्ट को कंपोनेंट्स में न बदलें। यदि आपको इस तरह एक नई प्रॉपर्टी सेट करने के लिए बदलाव की आवश्यकता है:

data () {
    return () {
        listClone: this.list
    }
}

और listClone का मान बदलें।

Answer 9

इसका उत्तर सरल है, आपको कुछ स्थानीय घटक चर का मान निर्दिष्ट करके सीधे प्रोप म्यूटेशन को तोड़ना चाहिए (डेटा प्रॉपर्टी हो सकती है, जो गेटर्स, सेटर या वॉचर्स के साथ गणना की जाती है)।

यहाँ द्रष्टा का उपयोग कर एक सरल उपाय है।

<template>
  <input
    v-model="input"
    @input="updateInput" 
    @change="updateInput"
  />

</template>

<script>
  export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      input: '',
    };
  },
  watch: {
    value: {
      handler(after) {
        this.input = after;
      },
      immediate: true,
    },
  },
  methods: {
    updateInput() {
      this.$emit('input', this.input);
    },
  },
};
</script>

यह वही है जो मैं किसी भी डेटा इनपुट घटकों को बनाने के लिए उपयोग करता हूं और यह ठीक काम करता है। माता-पिता से भेजे गए किसी भी नए डेटा (v- मॉडल (एड)) को मूल्य पर नजर रखने वाले द्वारा देखा जाएगा और इनपुट चर को सौंपा गया है और इनपुट प्राप्त होने के बाद, हम उस कार्रवाई को पकड़ सकते हैं और माता-पिता को इनपुट का उत्सर्जन करते हुए सुझाव देते हैं कि डेटा इनपुट है रूप तत्व से।

Answer 10

मैंने इस मुद्दे का भी सामना किया। चेतावनी का उपयोग करने के बाद मैं चला गया $onऔर $emit। यह प्रयोग की तरह कुछ $onऔर $emitमाता पिता के घटक के लिए बच्चे घटक से भेजे गए डेटा की सिफारिश की।

Answer 11

यदि आप प्रॉप्स को म्यूट करना चाहते हैं - ऑब्जेक्ट का उपयोग करें।

<component :model="global.price"></component>

घटक:

props: ['model'],
methods: {
  changeValue: function() {
    this.model.value = "new value";
  }
}

Comments

एक नोट के रूप में, आपको वस्तुओं को म्यूट करते समय सावधान रहना होगा। जावास्क्रिप्ट ऑब्जेक्ट्स को संदर्भ द्वारा पास किया जाता है, लेकिन एक चेतावनी है: जब आप किसी मान के बराबर चर सेट करते हैं तो संदर्भ टूट जाता है ।

— १।

Answer 12

आपको इस तरह कम्प्यूटेड विधि जोड़ने की आवश्यकता है

component.vue

props: ['list'],
computed: {
    listJson: function(){
        return JSON.parse(this.list);
    }
}

Answer 13

https://vuejs.org/v2/guide/compords.html के अनुसार वन-वे डेटा फ्लो वन-वे डेटा फ़्लो, घटक वन-वे डेटा फ़्लो का अनुसरण करते हैं, सभी प्रॉप्स चाइल्ड प्रॉपर्टी और पेरेंट के बीच एक-तरफ़ा-बंधन का निर्माण करते हैं एक, जब माता-पिता संपत्ति अद्यतन करते हैं, तो यह बच्चे के लिए नीचे बह जाएगा, लेकिन दूसरे तरीके से नहीं, यह बच्चे के घटकों को गलती से माता-पिता को उत्परिवर्तित करने से रोकता है, जिससे आपके ऐप के डेटा प्रवाह को समझना मुश्किल हो सकता है।

इसके अलावा, हर बार जब पैरेंट कंपोनेंट अपडेट होता है तो चाइल्ड कंपोनेंट्स में सभी प्रॉपर लेटेस्ट वैल्यू से रिफ्रेश हो जाएंगे। इसका मतलब है कि आपको एक बच्चे के घटक के अंदर एक प्रोप को म्यूट करने का प्रयास नहीं करना चाहिए। यदि आप .vue आपको कंसोल में चेतावनी देंगे।

आमतौर पर दो मामले होते हैं जहां किसी प्रॉप को म्यूट करने का प्रलोभन दिया जाता है: प्रॉप का उपयोग प्रारंभिक मूल्य में पास करने के लिए किया जाता है; बाल घटक इसे बाद में स्थानीय डेटा संपत्ति के रूप में उपयोग करना चाहता है। प्रस्ताव को एक कच्चे मूल्य के रूप में पारित किया जाता है जिसे रूपांतरित करने की आवश्यकता होती है। इन उपयोग मामलों के लिए उचित उत्तर हैं: एक स्थानीय डेटा संपत्ति को परिभाषित करें जो प्रोप के प्रारंभिक मूल्य को अपने प्रारंभिक मूल्य के रूप में उपयोग करता है:

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

गणना की गई संपत्ति को परिभाषित करें जो कि प्रोप के मूल्य से गणना की जाती है:

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Answer 14

Vue.js प्रॉप्स को उत्परिवर्तित नहीं किया जाना चाहिए क्योंकि यह Vue में एक एंटी-पैटर्न माना जाता है।

तरीका अपनाना आवश्यकता होगी अपने घटक पर डेटा गुण पैदा कर रही है कि संदर्भ मूल प्रोप की संपत्ति सूची

props: ['list'],
data: () {
  return {
    parsedList: JSON.parse(this.list)
  }
}

अब आपकी सूची संरचना जो घटक को दी गई है, संदर्भित है और dataआपके घटक की संपत्ति के माध्यम से उत्परिवर्तित होती है :-)

यदि आप अपनी सूची संपत्ति से अधिक पार्स करना चाहते हैं तो Vue घटक की computedसंपत्ति का उपयोग करें। यह आपको अपने प्रॉप्स के लिए गहराई से उत्परिवर्तन करने की अनुमति देता है।

props: ['list'],
computed: {
  filteredJSONList: () => {
    let parsedList = JSON.parse(this.list)
    let filteredList = parsedList.filter(listItem => listItem.active)
    console.log(filteredList)
    return filteredList
  }
}

ऊपर दिया गया उदाहरण आपकी सूची के प्रारूप को पार्स करता है और इसे केवल सक्रिय सूची- टेम्स तक फ़िल्टर करता है, इसे schnitts और गिगल्स के लिए लॉग आउट करता है और इसे वापस करता है।

नोट : दोनों dataऔर computedगुण उसी जैसे टेम्पलेट में संदर्भित हैं

<pre>{{parsedList}}</pre>

<pre>{{filteredJSONList}}</pre>

यह सोचना आसान हो सकता है कि एक computedसंपत्ति (एक विधि होने के नाते) को बुलाया जाना चाहिए ... यह नहीं है

Answer 15

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    computed: {
      middleData() {
        return this.list
      }
    },
    watch: {
      list(newVal, oldVal) {
        console.log(newVal)
        this.newList = newVal
      }
    },
    data() {
      return {
        newList: {}
      }
    }
});
new Vue({
    el: '.container'
})

शायद यह आपकी जरूरतों को पूरा करेगा।

Answer 16

सबसे अच्छा जवाब में जोड़ने,

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

किसी सरणी द्वारा प्रॉपर सेटिंग देव / प्रोटोटाइप के लिए होती है, उत्पादन में प्रोप प्रकार सेट करने के लिए सुनिश्चित करें ( https://vuejs.org/v2/guide/compords-props.html ) और प्रोप नहीं होने की स्थिति में एक डिफ़ॉल्ट मान सेट करें जनक द्वारा पोषित, जैसा कि।

Vue.component('task', {
    template: '#task-template',
    props: {
      list: {
        type: String,
        default() {
          return '{}'
        }
      }
    },
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

mutableListयदि आप अपरिभाषित हैं तो इस तरह से आप JSON.parse त्रुटि के बजाय एक खाली वस्तु प्राप्त कर सकते हैं ।

Answer 17

Vue.js इसे एक विरोधी पैटर्न मानता है। उदाहरण के लिए, कुछ प्रॉप्स की तरह की घोषणा करना और सेट करना

this.propsVal = 'new Props Value'

तो इस मुद्दे को हल करने के लिए आपको प्रॉप्स से डेटा या एक Vue उदाहरण की गणना की गई संपत्ति में एक मूल्य लेना होगा, जैसे कि:

props: ['propsVal'],
data: function() {
   return {
       propVal: this.propsVal
   };
},
methods: {
...
}

यह निश्चित रूप से काम करेगा।

Answer 18

उपरोक्त के अतिरिक्त, निम्नलिखित समस्या वाले अन्य लोगों के लिए:

"अगर प्रॉप्स वैल्यू की आवश्यकता नहीं है और इस तरह हमेशा नहीं लौटाया जाता है, तो पारित डेटा वापस आ जाएगा undefined(खाली के बजाय)"। जो <select>डिफ़ॉल्ट मान को गड़बड़ कर सकता है , मैंने इसे जाँच कर हल किया है कि क्या मान beforeMount()निम्न में सेट है (और इसे सेट करें यदि नहीं) निम्नानुसार है:

जे एस:

export default {
        name: 'user_register',
        data: () => ({
            oldDobMonthMutated: this.oldDobMonth,
        }),
        props: [
            'oldDobMonth',
            'dobMonths', //Used for the select loop
        ],
        beforeMount() {
           if (!this.oldDobMonth) {
              this.oldDobMonthMutated = '';
           } else {
              this.oldDobMonthMutated = this.oldDobMonth
           }
        }
}

एचटीएमएल:

<select v-model="oldDobMonthMutated" id="dob_months" name="dob_month">

 <option selected="selected" disabled="disabled" hidden="hidden" value="">
 Select Month
 </option>

 <option v-for="dobMonth in dobMonths"
  :key="dobMonth.dob_month_slug"
  :value="dobMonth.dob_month_slug">
  {{ dobMonth.dob_month_name }}
 </option>

</select>

Answer 19

मैं यह जवाब देना चाहता हूं जो बहुत सारे कोड, वॉचर्स और कम्प्यूटेड संपत्तियों का उपयोग करने से बचने में मदद करता है। कुछ मामलों में यह एक अच्छा समाधान हो सकता है:

Props को एक तरफ़ा संचार प्रदान करने के लिए डिज़ाइन किया गया है।

जब आपके पास show/hideप्रॉप के साथ एक मोडल बटन होता है जिसमें मेरे लिए सबसे अच्छा समाधान होता है:

<button @click="$emit('close')">Close Modal</button>

फिर श्रोता को मोडल तत्व में जोड़ें:

<modal :show="show" @close="show = false"></modal>

(इस मामले में प्रोप showशायद अनावश्यक है क्योंकि आप v-if="show"बेस-मोडल पर सीधे एक आसान का उपयोग कर सकते हैं )

Answer 20

मैं व्यक्तिगत रूप से हमेशा सुझाव देता हूं कि अगर आपको प्रॉपर म्यूट करने की आवश्यकता है, तो पहले उन्हें गणना की गई संपत्ति को पास करें और वहां से वापस लौटें, इसके बाद कोई भी आसानी से प्रॉप्स को म्यूट कर सकता है, यहां तक ​​कि आप प्रोप म्यूटेशन को ट्रैक कर सकते हैं, अगर वे दूसरे से उत्परिवर्तित हो रहे हैं। घटक भी या हम आप भी देख सकते हैं।

Answer 21

क्योंकि Vue प्रॉप्स एक तरह से डेटा फ्लो है, यह चाइल्ड कंपोनेंट्स को गलती से पेरेंट्स के स्टेट्स को म्यूट करने से रोकता है।

आधिकारिक Vue दस्तावेज़ से, हमें इस समस्याओं को हल करने के 2 तरीके मिलेंगे

1. यदि बच्चा घटक स्थानीय डेटा के रूप में प्रॉप्स का उपयोग करना चाहता है, तो स्थानीय डेटा संपत्ति को परिभाषित करना सबसे अच्छा है।

     props: ['list'],
     data: function() {
       return {
         localList: JSON.parse(this.list);
       }
     }
   

2. प्रस्ताव को एक कच्चे मूल्य के रूप में पारित किया जाता है जिसे रूपांतरित करने की आवश्यकता होती है। इस मामले में, प्रोप के मूल्य का उपयोग करके एक गणना की गई संपत्ति को परिभाषित करना सबसे अच्छा है:

     props: ['list'],
     computed: {
       localList: function() {
          return JSON.parse(this.list);
       },
       //eg: if you want to filter this list
       validList: function() {
          return this.list.filter(product => product.isValid === true)
       }
       //...whatever to transform the list
     }
   
   

Answer 22

हाँ !, v22 में उत्परिवर्तन गुण प्रतिमान है। लेकिन ... बस अन्य नियमों का उपयोग करके नियमों को तोड़ो, और आगे बढ़ो! आपको जो कुछ भी चाहिए वह आपके घटक विशेषता में .sync संशोधक को paret गुंजाइश में जोड़ रहा है। <your-awesome-components :custom-attribute-as-prob.sync="value" />

🤡 यह सरल है हम बैटमैन को मारते हैं kill

Answer 23

टाइपस्क्रिप्ट कब आपके पसंदीदा लैंग के लिए है। विकास का

<template>
<span class="someClassName">
      {{feesInLocale}}
</span>
</template>  



@Prop({default: 0}) fees: any;

// computed are declared with get before a function
get feesInLocale() {
    return this.fees;
}

और नहीं

<template>
<span class="someClassName">
      {{feesInLocale}}
</span>
</template>  



@Prop() fees: any = 0;
get feesInLocale() {
    return this.fees;
}

Answer 24

नीचे एक स्नैक बार घटक है, जब मैं स्नैकबार देता हूं वैरिएबल को सीधे वी-मॉडल में जैसे कि काम करेगा लेकिन कंसोल में, यह एक त्रुटि देगा

जब भी मूल घटक पुन: रेंडर करता है, तो मान को ओवरराइट कर दिया जाएगा क्योंकि सीधे एक प्रोप को बदलने से बचें। इसके बजाय, प्रोप के मूल्य के आधार पर डेटा या कंप्यूट की गई संपत्ति का उपयोग करें।

<template>
        <v-snackbar v-model="snackbar">
        {{ text }}
      </v-snackbar>
</template>

<script>
    export default {
        name: "loader",

        props: {
            snackbar: {type: Boolean, required: true},
            text: {type: String, required: false, default: ""},
        },

    }
</script>

इस म्यूटेशन त्रुटि से छुटकारा पाने के लिए सही तरीका वॉचर का उपयोग है

<template>
        <v-snackbar v-model="snackbarData">
        {{ text }}
      </v-snackbar>
</template>

<script>
/* eslint-disable */ 
    export default {
        name: "loader",
         data: () => ({
          snackbarData:false,
        }),
        props: {
            snackbar: {type: Boolean, required: true},
            text: {type: String, required: false, default: ""},
        },
        watch: { 
        snackbar: function(newVal, oldVal) { 
          this.snackbarData=!this.snackbarDatanewVal;
        }
      }
    }
</script>

तो मुख्य घटक में जहां आप इस स्नैक बार को लोड करेंगे आप बस इस कोड को कर सकते हैं

 <loader :snackbar="snackbarFlag" :text="snackText"></loader>

यह मेरे लिए काम किया