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];
    }
  }
});

ด้วยรหัสด้านบนข้อผิดพลาดด้านล่างนี้จะเกิดขึ้นเมื่อคลิกปุ่ม

[คำเตือน Vue]: คุณสมบัติหรือเมธอด "changeSetting" ไม่ได้กำหนดไว้ในอินสแตนซ์ แต่อ้างอิงระหว่างการแสดงผล อย่าลืมประกาศคุณสมบัติข้อมูลปฏิกิริยาในตัวเลือกข้อมูล (พบใน<MainTable>)

ปัญหา

[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ส่วนประกอบของคุณเป็นส่วนประกอบที่โง่ / นำเสนอ ( นี่คือสิ่งที่ต้องอ่านหากคุณไม่รู้ว่ามันคืออะไร แต่เป็น tl; dr คือส่วนประกอบมีหน้าที่เพียงแค่แสดงผลบางสิ่งเท่านั้น - ไม่มีตรรกะ) องค์ประกอบสมาร์ท / คอนเทนเนอร์มีหน้าที่รับผิดชอบตรรกะ - ในตัวอย่างที่ให้ไว้ในคำถามของคุณองค์ประกอบรากจะเป็นส่วนประกอบสมาร์ท / คอนเทนเนอร์ ด้วยสถาปัตยกรรมนี้คุณสามารถใช้วิธีการสื่อสารของผู้ปกครองและเด็กของ Vue เพื่อให้คอมโพเนนต์โต้ตอบได้ คุณส่งต่อข้อมูล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
    },
  },
}),

ข้างต้นน่าจะเพียงพอที่จะทำให้คุณมีความคิดที่ดีว่าควรทำอย่างไรและเริ่มต้นการแก้ไขปัญหาของคุณ

หากมีใครพบปัญหาโง่ ๆ แบบเดียวกับฉันตรวจสอบให้แน่ใจว่าส่วนประกอบของคุณมีคุณสมบัติ " data " ที่สะกดถูกต้อง (เช่นข้อมูลไม่ใช่วันที่ )

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

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

ในกรณีของฉันเหตุผลคือฉันลืมปิดเท่านั้น

</script>

แท็ก

แต่นั่นทำให้เกิดข้อความแสดงข้อผิดพลาดเดียวกัน

อาจเกิดจากการสะกดผิด

ฉันพิมพ์ผิดที่แท็กปิดสคริปต์

</sscript>

หากคุณใช้อินสแตนซ์ vue สองครั้ง จากนั้นจะให้ข้อผิดพลาดนี้ ตัวอย่างเช่นในapp.jsและแท็กสคริปต์ของคุณเองในไฟล์มุมมอง เพียงใช้ครั้งเดียว

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

การเพิ่มบิตของฉันด้วยหากใครก็ตามที่มีปัญหาเหมือนฉันโปรดสังเกตว่าmethodเป็นคำที่คำนึงถึงตัวพิมพ์เล็กและใหญ่

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

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

'วิธีการ' ควรเป็น 'วิธีการ'

น่าจะเป็นข้อผิดพลาดในการสะกดของตัวแปร vuejs ที่สงวนไว้ ฉันมาที่นี่เพราะฉันสะกดผิดcomputed:และ vuejs จะไม่รู้จักตัวแปรคุณสมบัติที่คำนวณของฉัน ดังนั้นหากคุณมีข้อผิดพลาดเช่นนี้โปรดตรวจสอบการสะกดของคุณก่อน!

ฉันได้รับข้อผิดพลาดนี้เมื่อพยายามกำหนดคุณสมบัติคอมโพเนนต์ให้กับคุณสมบัติของรัฐในระหว่างการสร้างอินสแตนซ์

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

ฉันมีสองคนmethods:ในการ<script>แสดงว่าคุณสามารถใช้เวลาหลายชั่วโมงเพื่อค้นหาบางสิ่งที่ผิดพลาดง่ายๆเช่นนี้

ปัญหาของฉันคือฉันวางวิธีการไว้ในวัตถุข้อมูลของฉัน แค่จัดรูปแบบแบบนี้ก็จะใช้งานได้ดี

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

หากคุณกำลังประสบปัญหานี้ให้ตรวจสอบว่าคุณไม่มี

methods: {
...
}

หรือ

computed: {
...
}

ประกาศสองครั้ง

ในกรณีของฉันมันเป็นคุณสมบัติที่ทำให้ฉันมีข้อผิดพลาดการเขียนที่ถูกต้องและยังคงให้ข้อผิดพลาดในคอนโซล ฉันค้นหามากและไม่มีอะไรได้ผลสำหรับฉันเลยจนกระทั่งฉันให้ Ctrl + F5 และVoiláแก่เขา! ข้อผิดพลาดถูกลบออก : 'v