[Vue warn] : 속성 또는 메서드가 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다.

[Vue warn] : 속성 또는 메서드가 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다.

---

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 warn] : 속성 또는 메서드 "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];
    }
  }
});

기억해야 할 것은 속성과 메서드가 정의 된 범위에서만 참조 될 수 있다는 것입니다.

부모 템플릿의 모든 것은 부모 범위에서 컴파일됩니다. 자식 템플릿의 모든 것은 자식 범위에서 컴파일됩니다.

Vue의 문서 에서 구성 요소 컴파일 범위에 대해 자세히 읽을 수 있습니다 .

그것에 대해 무엇을 할 수 있습니까?

지금까지 올바른 범위에서 사물을 정의하는 것에 대해 많은 논의가 있었으므로 수정은 changeSetting정의를 MainTable구성 요소 로 옮기는 것 입니까?

간단 해 보이지만 여기에 제가 추천하는 것이 있습니다.

MainTable구성 요소가 멍청한 / 표현적인 구성 요소가 되기를 원할 것입니다 . ( 여기에 - 어떤 논리 DR 구성 요소가 무엇인가를 렌더링하는 단지 책임이 있다는 것입니다 당신이 그것을이지만 TL은 무엇을 모르는 경우 읽을 수있는 무언가이다). 스마트 / 컨테이너 요소는 논리를 담당합니다. 질문에 제공된 예에서 루트 구성 요소는 스마트 / 컨테이너 구성 요소입니다. 이 아키텍처를 사용하면 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
    },
  },
}),

위의 내용은해야 할 일에 대한 좋은 아이디어를 제공하고 문제 해결을 시작하기에 충분할 것입니다.

---

Should anybody land with the same silly problem I had, make sure your component has the data property spelled correctly.

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

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

Notice I typed date(). It should be data().

참고URL : https://stackoverflow.com/questions/42908525/vue-warn-property-or-method-is-not-defined-on-the-instance-but-referenced-dur