[ভ্যু সতর্কতা]: সম্পত্তি বা পদ্ধতি উদাহরণ হিসাবে সংজ্ঞায়িত করা হয় না তবে রেন্ডার সময় উল্লেখ করা হয়

Question 1

var MainTable = Vue.extend({
  template: "<ul>" +
    "<li v-for='(set,index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  data: function() {
    return data;
  }
});

Vue.component("main-table", MainTable);

data.settingsSelected = {};
var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

উপরের কোড সহ, বোতামটি ক্লিক করা হলে নীচের ত্রুটি ঘটে।

[ভ্যু সতর্কতা]: সম্পত্তি বা পদ্ধতি "চেঞ্জসেটিং" উদাহরণটিতে সংজ্ঞায়িত করা হয় না তবে রেন্ডার সময় উল্লেখ করা হয়। ডেটা বিকল্পে প্রতিক্রিয়াশীল ডেটা বৈশিষ্ট্যগুলি ঘোষণা করার বিষয়টি নিশ্চিত করুন। (পাওয়া গেছে <MainTable>)

Question 2

সমস্যা

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

ত্রুটি ঘটছে কারণ changeSettingপদ্ধতিটি MainTableএখানে উপাদানটিতে উল্লেখ করা হচ্ছে :

    "<button @click='changeSetting(index)'> Info </button>" +

তবে changeSettingপদ্ধতিটি MainTableউপাদানটিতে সংজ্ঞায়িত করা হয়নি । এটি এখানে মূল উপাদানটিতে সংজ্ঞায়িত করা হচ্ছে:

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

যা মনে রাখা দরকার তা হ'ল বৈশিষ্ট্য এবং পদ্ধতিগুলি কেবলমাত্র সেই ক্ষেত্রগুলিতেই সংজ্ঞায়িত করা যেতে পারে যেখানে সেগুলি সংজ্ঞায়িত করা হয়।

প্যারেন্ট টেমপ্লেটের সমস্ত কিছু প্যারেন্ট স্কোপেই সংকলিত হয়; চাইল্ড টেমপ্লেটের সমস্ত কিছুই সন্তানের সুযোগে সংকলিত।

আপনি ভয়ের ডকুমেন্টেশনে উপাদান সংকলনের সুযোগ সম্পর্কে আরও পড়তে পারেন ।

আমি এটি সম্পর্কে কি করতে পারি?

এখনও পর্যন্ত সঠিক সুযোগে জিনিসগুলি সংজ্ঞায়িত করার বিষয়ে অনেক কথাবার্তা হয়েছে তাই ফিক্সটি কেবল changeSettingসংজ্ঞাটিকে MainTableউপাদানটিতে স্থানান্তরিত করতে হবে ?

এটি সহজ বলে মনে হচ্ছে তবে আমি যা প্রস্তাব করি তা এখানে।

আপনি সম্ভবত চান আপনার MainTableউপাদানটি বোবা / উপস্থাপক উপাদান হয়ে উঠুক। ( এখানে পড়ার মতো এমন কিছু বিষয় যা আপনি যদি না জানেন তবে এটি কী টিএল; ড। হ'ল উপাদানটি কোনও কিছু সরবরাহের জন্য কেবল দায়ী - কোনও যুক্তি নেই)। যুক্তিটির জন্য স্মার্ট / ধারক উপাদান দায়ী - আপনার প্রশ্নে দেওয়া উদাহরণে মূল উপাদানটি হবে স্মার্ট / ধারক উপাদান। এই আর্কিটেকচারের সাহায্যে উপাদানগুলি ইন্টারঅ্যাক্ট করার জন্য আপনি ভিউর পিতামাতার-শিশু যোগাযোগের পদ্ধতিগুলি ব্যবহার করতে পারেন। আপনি প্রপসেরMainTable মাধ্যমে ডেটা নীচে দিয়ে দিন এবং ইভেন্টগুলির মাধ্যমে এর ক্রিয়াকলাপ থেকে ব্যবহারকারীর ক্রিয়াগুলি প্রেরণ করেন । এটি দেখতে এরকম কিছু দেখাচ্ছে:MainTable

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});


var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

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

Question 3

আমার যে একই নির্বোধ সমস্যাটি ছিল সেটির সাথে যদি কেউ অবতরণ করে তবে নিশ্চিত হয়ে নিন যে আপনার উপাদানটির ' ডেটা ' সম্পত্তিটি সঠিকভাবে বানান করেছে। (যেমন , ডেটা এবং তারিখ নয় )

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

Question 4

আমার ক্ষেত্রে কারণ ছিল, আমি কেবল বন্ধটি ভুলে গেছি

</script>

ট্যাগ

কিন্তু এটি একই ত্রুটির বার্তাটি ঘটায়।

Question 5

এটি সম্ভবত বানান ত্রুটির কারণে হয়েছে

স্ক্রিপ্ট ক্লোজিং ট্যাগে আমি একটি টাইপো পেয়েছি

</sscript>

Question 6

যদি আপনি দু'বার অপরিহার্য উদাহরণ ব্যবহার করেন। তাহলে এটি আপনাকে এই ত্রুটি দেবে। উদাহরণস্বরূপ app.js এ এবং ফাইলটিতে আপনার নিজের স্ক্রিপ্ট ট্যাগ script শুধু একবার ব্যবহার করুন

 const app = new Vue({
    el: '#app',
});

Question 7

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

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  Methods: {
      name() {return '';}
  }
</script>

'পদ্ধতি' 'পদ্ধতি' হওয়া উচিত

Question 8

এটি সম্ভবত সংরক্ষিত ভয়েজ ভেরিয়েবলের একটি বানান ত্রুটি। আমি এখানে এসেছি কারণ আমি ভুল বানান করেছিলাম computed:এবং ভয়েজগণ আমার গণিত সম্পত্তি ভেরিয়েবলগুলি চিনতে পারে না। সুতরাং আপনার যদি এর মতো ত্রুটি থাকে তবে প্রথমে আপনার বানানটি পরীক্ষা করুন!

Question 9

ইনস্ট্যান্টেশন চলাকালীন যখন আমি কোনও রাজ্যের সম্পত্তিতে একটি উপাদান সম্পত্তি অর্পণ করার চেষ্টা করেছি তখন আমি এই ত্রুটিটি পেয়েছি

export default {
 props: ['value1'],
 data() {
  return {
   value2: this.value1 // throws the error
   }
  }, 
 created(){
  this.value2 = this.value1 // safe
 }
}

Question 10

আমার কাছে তা থাকত দুই methods:মধ্যে <script>দেখাতে যায়, যে আপনি ঘন্টা ব্যয় করতে পারেন এমন কিছু বিষয় যা যেমন একটি সহজ ভুল ছিল খুঁজছেন।

Question 11

আমার সমস্যাটি ছিল আমি আমার ডেটা অবজেক্টের ভিতরে পদ্ধতিগুলি রাখছিলাম। কেবল এটির মতো বিন্যাস করুন এবং এটি দুর্দান্তভাবে কাজ করবে।

<script>
module.exports = {
    data: () => {
        return {
            name: ""
        }
    },
    methods: {
        myFunc() {
            // code
        }
    }
}
</script>

Question 12

আপনি যদি এই সমস্যাটি ভোগ করে থাকেন তবে নিশ্চিত হয়ে নিন যে আপনার নেই

methods: {
...
}

বা

computed: {
...
}

দুবার ঘোষিত

Question 13

আমার ক্ষেত্রে এটি এমন সম্পত্তি যা আমাকে ত্রুটি দিয়েছে, সঠিক লেখা এবং তবুও আমাকে কনসোলে ত্রুটি দিয়েছে। যতক্ষণ না আমি তাকে Ctrl + F5 এবং Voilá না দিয়েছি ততক্ষণ আমি অনেক অনুসন্ধান করেছি এবং আমার পক্ষে কিছুই কাজ করে না! ত্রুটি সরানো হয়েছে। : 'ভি