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

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

내가 가진 똑같은 어리석은 문제를 가진 사람이 있다면, 당신의 구성 요소에 올바른 철자가 ' 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',
});

내 비트를 추가하면 누구나 나처럼 어려움을 겪는다면 메소드 가 대소 문자를 구분하는 단어라는 것을 알 수 있습니다.

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

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

'Methods'는 'methods'여야합니다.

예약 된 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