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

Với đoạn mã trên, lỗi bên dưới xảy ra khi nút được nhấp.

[Vue warning]: Thuộc tính hoặc phương thức "changeSetting" không được xác định trên cá thể nhưng được tham chiếu trong quá trình kết xuất. Đảm bảo khai báo thuộc tính dữ liệu phản ứng trong tùy chọn dữ liệu. (tìm thấy trong <MainTable>)

Vấn đề

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

Lỗi xảy ra vì changeSettingphương thức đang được tham chiếu trong MainTablethành phần ở đây:

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

Tuy nhiên changeSettingphương thức không được xác định trong MainTablethành phần. Nó đang được định nghĩa trong thành phần gốc ở đây:

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

Điều cần nhớ là các thuộc tính và phương thức chỉ có thể được tham chiếu trong phạm vi mà chúng được định nghĩa.

Mọi thứ trong khuôn mẫu cha được biên dịch trong phạm vi cha; mọi thứ trong mẫu con được biên dịch trong phạm vi con.

Bạn có thể đọc thêm về phạm vi biên dịch thành phần trong tài liệu của Vue .

Tôi có thể làm gì với nó?

Từ trước đến nay có rất nhiều người nói về việc xác định mọi thứ trong phạm vi chính xác nên cách khắc phục chỉ là chuyển changeSettingđịnh nghĩa vào MainTablethành phần?

Nó có vẻ đơn giản nhưng đây là những gì tôi đề xuất.

Bạn có thể muốn MainTablethành phần của mình là một thành phần câm / trình bày. ( Đây là một cái gì đó để đọc nếu bạn không biết nó là gì ngoài một tl; dr là thành phần chỉ chịu trách nhiệm hiển thị một cái gì đó - không có logic). Phần tử thông minh / container chịu trách nhiệm về logic - trong ví dụ được đưa ra trong câu hỏi của bạn, thành phần gốc sẽ là thành phần thông minh / container. Với kiến ​​trúc này, bạn có thể sử dụng các phương thức giao tiếp cha-con của Vue để các thành phần tương tác. Bạn chuyển dữ liệu cho MainTablethông qua đạo cụ và gửi các hành động của người dùng từ MainTablecho cha mẹ của nó thông qua các sự kiện . Nó có thể trông giống như sau:

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
    },
  },
}),

Trên đây là đủ để cung cấp cho bạn ý tưởng tốt về những gì cần làm và bắt đầu giải quyết vấn đề của bạn.

Nếu ai đó gặp phải vấn đề ngớ ngẩn tương tự mà tôi đã gặp phải, hãy đảm bảo rằng thành phần của bạn có thuộc tính ' data ' được viết đúng chính tả. (ví dụ: dữ liệu , chứ không phải ngày tháng )

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

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

Trong trường hợp của tôi, lý do là, tôi chỉ quên đóng cửa

</script>

nhãn.

Nhưng điều đó gây ra cùng một thông báo lỗi.

Nó có thể do lỗi chính tả

Tôi mắc lỗi đánh máy ở thẻ đóng tập lệnh

</sscript>

Nếu bạn sử dụng hai lần vue instance. Sau đó, nó sẽ cung cấp cho bạn lỗi này. Ví dụ: trong app.js và thẻ tập lệnh của riêng bạn trong tệp xem. Chỉ sử dụng một lần

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

Thêm bit của tôi nữa, nếu ai đó gặp khó khăn như tôi, hãy lưu ý rằng các phương thức là một từ phân biệt chữ hoa chữ thường:

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

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

'Phương thức' phải là 'phương thức'

Rất có thể đây là lỗi chính tả của các biến vuejs dành riêng. Tôi đến đây vì tôi viết sai chính tả computed:và vuejs sẽ không nhận ra các biến thuộc tính được tính toán của tôi. Vì vậy, nếu bạn gặp lỗi như thế này, hãy kiểm tra chính tả của bạn trước!

Tôi gặp lỗi này khi cố gắng gán thuộc tính thành phần cho thuộc tính trạng thái trong quá trình khởi tạo

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

Tôi đã có hai methods:trong số <script>, sẽ cho thấy rằng bạn có thể dành hàng giờ để tìm kiếm một thứ mà chỉ là một sai lầm đơn giản như vậy.

Vấn đề của tôi là tôi đã đặt các phương thức bên trong đối tượng dữ liệu của mình. chỉ cần định dạng nó như thế này và nó sẽ hoạt động tốt.

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

Nếu bạn đang gặp sự cố này, hãy kiểm tra để đảm bảo rằng bạn không có

methods: {
...
}

hoặc là

computed: {
...
}

tuyên bố hai lần

Trong trường hợp của tôi, đó là một tài sản đã cho tôi lỗi, viết đúng và vẫn cho tôi lỗi trong bảng điều khiển. Tôi đã tìm kiếm rất nhiều và không có gì hiệu quả cho tôi, cho đến khi tôi đưa cho anh ta Ctrl + F5 và Voilá! lỗi đã được loại bỏ. : 'v