মান 2 - রূপান্তরকারী প্রসেস ভ্যু-সতর্কতা

Question

আমি https://laracasts.com/series/learning-vue-step-by-step সিরিজ শুরু করেছি । আমি এই ত্রুটি সহ ভ্যু, লারাভেল এবং এজেএক্স পাঠ বন্ধ করেছিলাম :

vue.js: 2574 [ভ্যু সতর্কতা]: প্যারেন্ট উপাদানগুলি যখনই পুনরায় রেন্ডার করে তখনই মানটিকে ওভাররাইট করা হবে বলে সরাসরি কোনও প্রপকে পরিবর্তন করতে এড়াবেন। পরিবর্তে, প্রোপের মানের ভিত্তিতে একটি ডেটা বা গণিত সম্পত্তি ব্যবহার করুন। প্রোপ পরিবর্তন করা হচ্ছে: "তালিকা" (উপাদানটিতে পাওয়া যায়)

আমার এই কোডটি মেইন.জেএস এ আছে

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

আমি জানি যে তালিকাটি প্রোপ ওভাররাইট করার সময় সমস্যাটি তৈরি হয়েছিল () তবে আমি ভ্যুতে একজন নবাগত, সুতরাং কীভাবে এটি ঠিক করতে হয় তা আমি পুরোপুরি জানি না। এটির সমাধান কীভাবে (এবং দয়া করে ব্যাখ্যা করুন) কারও ধারণা আছে?

Comments

অনুমান করুন, এটি একটি ত্রুটি নয় কেবল একটি সতর্কতা বার্তা।

— ডেভিড আর

Answer 1

এটি এই বিষয়টির সাথে সম্পর্কিত যে স্থানীয়ভাবে একটি প্রপকে পরিবর্তিত করা ভ্যু 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

এটি দুর্দান্ত উত্তর, তবে আমি এটিও মনে করি যে ইভেন্ট বন্ডিং অন্তর্ভুক্ত করার জন্য এটি আপডেট করা উচিত। বাচ্চা থেকে শুরু হওয়া একটি ইভেন্ট পিতামাতাকে আপডেট করতে পারে, যা সন্তানের কাছে আপডেট প্রপসগুলি পাস করবে। এইভাবে, সত্যের উত্স এখনও সমস্ত উপাদান জুড়ে বজায় রাখা হয়। একাধিক উপাদান জুড়ে ভাগ করা রাষ্ট্রের পরিচালনার জন্য ভেক্সেরও উল্লেখ করা উচিত।

— ওয়েস হার্পার

@ ওয়েস হার্পার, পিতামাতার আপডেট ইভেন্টটি স্বয়ংক্রিয়ভাবে পেতে সংক্ষিপ্ত রূপ হিসাবে । Sync পরিবর্তনকারী ব্যবহার করাও সম্ভব ।

— danb4r

Answer 2

ভ্যু প্যাটার্নটি propsনীচে এবং eventsউপরে। এটি সহজ শোনায় তবে কাস্টম উপাদান লেখার সময় ভুলে যাওয়া সহজ।

ভ্যু ২.২.০ হিসাবে আপনি ভি-মডেল ( গণিত বৈশিষ্ট্য সহ ) ব্যবহার করতে পারেন । আমি এই সংমিশ্রণটি উপাদানগুলির মধ্যে একটি সাধারণ, পরিষ্কার এবং সামঞ্জস্যপূর্ণ ইন্টারফেস তৈরি করে খুঁজে পেয়েছি:

• 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

আমার সন্দেহ হয় সেটার থেকে আগতকে কল করা ভাল অনুশীলন নয়। আপনি যা বিবেচনা করতে পারেন তা হ'ল আপনার গণিত সম্পত্তিতে একটি নজর রাখা এবং সেখানে আপনার যুক্তি যুক্ত করা।

— ক্রিস

প্রপস ডাউন এবং ইভেন্টগুলি আমার সাথে ক্লিক করা। ভ্যুজেজের ডক্সে এটি কোথায় ব্যাখ্যা করা হয়েছে?

— নেবুলাস গার্ল

: @nebulousGirl কটাক্ষপাত এখানে vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

— ক্রিস

আমি মনে করি এটি প্যারেন্ট উপাদানগুলিতে পরিবর্তনগুলি নির্বিঘ্ন করার আরও বেদনাদায়ক উপায়।

— মুহাম্মদ

Answer 3

ভ্যু কেবল আপনাকে সতর্ক করে: আপনি উপাদানটিতে প্রপ পরিবর্তন করেন, কিন্তু যখন প্যারেন্ট উপাদানগুলি পুনরায় রেন্ডার করে, "তালিকা" ওভাররাইট করা হবে এবং আপনি আপনার সমস্ত পরিবর্তন হারাবেন। সুতরাং এটি করা বিপজ্জনক।

পরিবর্তে গণিত সম্পত্তি ব্যবহার করুন:

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

Comments

2 উপায় বাইন্ডিং প্রোপ সম্পর্কে কি?

— জোশ আর

আপনি যদি দ্বি-উপাত্তের ডেটা বন্ডিং চান তবে আপনার কাস্টম ইভেন্টগুলি ব্যবহার করা উচিত, আরও তথ্যের জন্য পড়ুন: vuejs.org/v2/guide/compferences.html#sync- মোডিফায়ার আপনি এখনও সরাসরি প্রপ সংশোধন করতে পারবেন না, আপনার একটি ইভেন্ট এবং ফাংশন দরকার যা আপনার জন্য একটি প্রস্তাব পরিবর্তন পরিচালনা করে।

— মার্কো

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

প্রপস ডাউন, ইভেন্ট আপ। এটাই ভ্যুর প্যাটার্ন। মুল বক্তব্যটি হ'ল আপনি যদি কোনও অভিভাবকের কাছ থেকে পাস করে প্রপসকে পরিবর্তন করতে চেষ্টা করেন। এটি কাজ করবে না এবং এটি প্যারেন্ট উপাদান দ্বারা বারবার ওভাররাইট হয়ে যায়। চাইল্ড উপাদান কেবল কোনও ইভেন্টকে প্রেরণ করতে পারে পিতামহীন উপাদানগুলিকে অবহিত করার জন্য h আপনি যদি এই সীমাবদ্ধতাগুলি পছন্দ করেন না, আপনি VUEX ব্যবহার করতে পারেন (আসলে এই প্যাটার্নটি জটিল উপাদান কাঠামোতে স্তন্যপান করবে, আপনার VUEX ব্যবহার করা উচিত!)

Comments

ইভেন্ট বাস ব্যবহারের একটি বিকল্পও রয়েছে

— স্টিভেন প্রবিলিনস্কি

ইভেন্ট বাস স্থানীয়ভাবে vue

— আলেকজমা

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

ভ্যুজেস ২.০ অনুসারে, আপনাকে উপাদানটির অভ্যন্তরে কোনও প্রপোকে পরিবর্তন করতে হবে না। তারা কেবল তাদের পিতামাতার দ্বারা পরিবর্তিত হয়। অতএব, আপনার পৃথক নামের সাথে ডেটাতে ভেরিয়েবলগুলি সংজ্ঞায়িত করা উচিত এবং প্রকৃত প্রপস দেখে তাদের আপডেট করা উচিত। যদি কোনও পিতা-মাতার দ্বারা তালিকা প্রস্তাবটি পরিবর্তিত হয় তবে আপনি এটিকে বিশ্লেষণ করতে এবং এটি পরিবর্তনীয় তালিকাতে নির্ধারণ করতে পারেন। এখানে একটি সম্পূর্ণ সমাধান।

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

প্রপসগুলি সরাসরি উপাদানগুলিতে পরিবর্তন করবেন না if আপনার যদি এটির দরকার হয় তবে এটির মতো একটি নতুন সম্পত্তি সেট করুন:

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

এবং তালিকা ক্লোনটির মান পরিবর্তন করুন।

Answer 9

উত্তরটি সহজ, আপনার কিছু স্থানীয় উপাদান ভেরিয়েবলের মূল্য নির্ধারণের মাধ্যমে সরাসরি প্রোপ মিউটেশনটি ভেঙে ফেলা উচিত (ডেটা সম্পত্তি হতে পারে, গেটার্স, সেটার্স বা নজরদারিদের সাথে গণনা করা যেতে পারে)।

নজরদার ব্যবহার করে এখানে একটি সহজ সমাধান's

<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>

আমি যে কোনও ডেটা ইনপুট উপাদান তৈরি করতে এটি ব্যবহার করি এবং এটি ঠিক কাজ করে। পিতা-মাতার কাছ থেকে প্রেরিত যে কোনও নতুন ডেটা (ভি-মডেল (এডি)) মান পর্যবেক্ষক দ্বারা দেখা হবে এবং ইনপুট ভেরিয়েবলের জন্য নির্ধারিত হবে এবং একবার ইনপুট পাওয়ার পরে, আমরা সেই ক্রিয়াটি ধরতে পারি এবং পিতামাতাকে ইনপুট নির্ধারণ করতে পারি যে ডেটা ইনপুট বলে বোঝায় ফর্ম উপাদান থেকে।

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/compferences.html অনুসারে , উপাদানটি এক-উপাত্ত ডেটা ফ্লো অনুসরণ করে, সমস্ত প্রসেসগুলি সন্তানের সম্পত্তি এবং পিতামাতার মধ্যে একমুখী বাঁধাই করে এক, পিতামাতার সম্পত্তি আপডেট হয়ে গেলে, এটি সন্তানের কাছে প্রবাহিত হবে তবে অন্যভাবে নয়, এটি চাইল্ড উপাদানগুলিকে ঘটনাক্রমে পিতামাতার পরিবর্তন করতে বাধা দেয় যা আপনার অ্যাপ্লিকেশনটির ডেটা বোঝার পক্ষে আরও প্রবাহিত করতে পারে।

তদতিরিক্ত, প্রতিবার পিতা বা মাতা উপাদান আপডেট হওয়ার সাথে সাথে শিশু উপাদানগুলির সমস্ত প্রপস সর্বশেষ মান সহ সতেজ হবে। এর অর্থ আপনার সন্তানের উপাদানগুলির মধ্যে কোনও প্রোপকে পরিবর্তিত করার চেষ্টা করা উচিত নয়। আপনি যদি করেন .vue কনসোলে আপনাকে সতর্ক করবে।

সাধারণত দুটি ক্ষেত্রে দেখা যায় যে কোনও প্রপকে রূপান্তর করার জন্য এটি লোভনীয়: প্রপটি প্রাথমিক মান হিসাবে পাস করার জন্য ব্যবহৃত হয়; শিশু উপাদানটি পরে এটি স্থানীয় ডেটা সম্পত্তি হিসাবে ব্যবহার করতে চায়। প্রোপটি একটি কাঁচা মান হিসাবে রূপান্তরিত হওয়া দরকার passed এই ব্যবহারের ক্ষেত্রে যথাযথ উত্তর হ'ল একটি স্থানীয় ডেটা সম্পত্তি ব্যাখ্যা করুন যা প্রপের প্রাথমিক মানটিকে তার প্রাথমিক মান হিসাবে ব্যবহার করে:

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

প্রোপ এর মান থেকে গণনা করা একটি গুণিত সম্পত্তি সংজ্ঞা দিন:

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

Answer 14

ভ্যু.জেএস প্রপসগুলিকে পরিবর্তন করতে হবে না কারণ এটি ভ্যুতে একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচিত হয়।

পদ্ধতির আপনি নিতে প্রয়োজন হবে আপনার উপাদান থাকা একটি ডেটার সম্পত্তি তৈরি করা হয় যে রেফারেন্স মূল ঠেকনা সম্পত্তির তালিকা

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

এখন আপনার তালিকার কাঠামো যা উপাদানটিতে প্রেরণ করা হয়েছে তা dataআপনার উপাদানটির সম্পত্তিটির মাধ্যমে রেফারেন্স এবং রূপান্তরিত হয় :-)

যদি আপনি কেবল আপনার তালিকার সম্পত্তিটি বিশ্লেষণের চেয়ে আরও কিছু করতে চান তবে ভ্যু উপাদানটির computedসম্পত্তিটি ব্যবহার করুন। এটি আপনাকে আপনার প্রপসগুলিতে আরও গভীরতর রূপান্তর করতে দেয়।

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

উপরের উদাহরণটি আপনার তালিকার প্রপকে পার্স করে এবং এটিকে কেবল সক্রিয় তালিকা- tems এ ফিল্টার করে , স্ক্যানিট এবং জিগলসের জন্য এটিকে লগ আউট করে এবং ফেরত দেয়।

দ্রষ্টব্য : উভয় 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/compferences-prop.html ) এবং প্রোপ না থাকলে একটি ডিফল্ট মান সেট করুন পিতামাতার দ্বারা জনবহুল, তাই।

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

এইভাবে আপনি mutableListJSON. পার্স ত্রুটির পরিবর্তে কমপক্ষে একটি খালি অবজেক্ট পাবেন যদি এটি অপরিজ্ঞাত থাকে।

Answer 17

ভ্যু.জেস এটিকে একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচনা করে। উদাহরণস্বরূপ, কিছু প্রপস যেমন ঘোষণা এবং সেট করা

this.propsVal = 'new Props Value'

সুতরাং এই সমস্যাটি সমাধান করার জন্য আপনাকে প্রপস থেকে ডেটা বা কোনও ভ্যু উদাহরণের গণিত সম্পত্তি হিসাবে এই জাতীয় মূল্য নিতে হবে:

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

আমি এই উত্তরটি দিতে চাই যা প্রচুর কোড, প্রহরী এবং গণিত বৈশিষ্ট্য ব্যবহার এড়াতে সহায়তা করে। কিছু ক্ষেত্রে এটি একটি ভাল সমাধান হতে পারে:

প্রপসগুলি একমুখী যোগাযোগ সরবরাহ করার জন্য ডিজাইন করা হয়েছে।

যখন আপনার কাছে show/hideপ্রপ সহ একটি মডেল বোতাম থাকে তখন আমার কাছে সবচেয়ে ভাল সমাধান হ'ল কোনও ইভেন্ট নির্গত করা:

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

তারপরে শ্রোতাদের মডেল উপাদানের সাথে যুক্ত করুন:

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

(এক্ষেত্রে প্রপটি showসম্ভবত অপ্রয়োজনীয় কারণ আপনি v-if="show"বেস-মডেলটিতে সরাসরি কোনও সহজে ব্যবহার করতে পারেন )

Answer 20

আমি ব্যক্তিগতভাবে সর্বদা পরামর্শ দিই যে আপনার প্রপসকে পরিবর্তিত করতে হবে, প্রথমে তাদের গণনা করা সম্পত্তিতে প্রেরণ করুন এবং সেখান থেকে ফিরে আসুন, তারপরে কেউ সহজেই প্রপসটি পরিবর্তন করতে পারে, এমনকি আপনি যদি প্রপস পরিবর্তনটি ট্র্যাক করতে পারেন তবে সেগুলি যদি অন্য থেকে রূপান্তরিত হয় if উপাদানও আমরা আপনাকে দেখতে পারি।

Answer 21

কারণ ভ্যু প্রপস হ'ল এক উপায়ে ডেটা প্রবাহ, এটি শিশু উপাদানগুলিকে ঘটনাক্রমে পিতামাতার অবস্থার পরিবর্তন করতে বাধা দেয়।

অফিসিয়াল ভ্যু ডকুমেন্ট থেকে আমরা এই সমস্যাগুলি সমাধান করার জন্য 2 টি উপায় খুঁজে বের করব

1. যদি সন্তানের উপাদানগুলি স্থানীয় ডেটা হিসাবে প্রপস ব্যবহার করতে চায় তবে কোনও স্থানীয় ডেটা সম্পত্তি ব্যাখ্যা করা ভাল।

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

2. প্রোপটি একটি কাঁচা মান হিসাবে রূপান্তরিত হওয়া দরকার passed এই ক্ষেত্রে, প্রোপের মান ব্যবহার করে একটি গণিত সম্পত্তি সংজ্ঞা দেওয়া ভাল:

     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

হ্যাঁ, Vue2 এ রূপান্তরকারী বৈশিষ্ট্যগুলি হ'ল অ্যান্টি-প্যাটার্ন। তবে ... কেবলমাত্র অন্যান্য নিয়ম ব্যবহার করে নিয়মগুলি ভঙ্গ করুন, এবং এগিয়ে যান! আপনার যা প্রয়োজন তা প্যারেট স্কোপে আপনার উপাদান বৈশিষ্ট্যে। Sync সংশোধক যুক্ত করছে। <your-awesome-components :custom-attribute-as-prob.sync="value" />

🤡 এটা সহজ আমরা ব্যাটম্যানকে হত্যা করি 😁

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>

এটা আমার জন্য কাজ করেছে