[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이 컴포넌트는 dumb/presentation 컴포넌트입니다.(여기에서는 tl;dr은 컴포넌트가 무언가를 렌더링하는 역할만 하고 논리는 없습니다.)Smart/container 요소는 논리를 담당합니다. 질문의 예에서 루트 구성 요소는 Smart/container 구성 요소입니다.이 아키텍처를 사용하면 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
    },
  },
}),

위의 내용을 참고하면 문제 해결 방법과 킥스타트를 쉽게 이해할 수 있습니다.

저와 같은 문제가 발생한 경우 컴포넌트에 '데이터' 속성의 철자가 올바른지 확인하십시오(예: 데이터, 날짜가 아님).

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

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

저 같은 경우에는 클로징만 까먹었어요.

</script>

태그를 붙입니다.

하지만 그로 인해 동일한 오류 메시지가 발생했습니다.

철자 오류 때문일 겁니다.

스크립트 클로징 태그에서 오타가 발생했습니다.

</sscript>

이 문제가 발생하고 있는 경우는, 이 문제가 없는 것을 확인해 주세요.

methods: {
...
}

또는

computed: {
...
}

두 번 선언되었다

자산을 반환하는 것을 잊지 마십시오.

속성 "검색"이 렌더링 중에 액세스되었지만 인스턴스에서 정의되지 않은 또 다른 이유는 변수 반환을 잊은 경우입니다.setup(){}

따라서 마지막에는 반환문을 추가해야 합니다.

export default {

  setup(){

    const search = ref('')
    //Whatever code

    return {search}

  }
}

주의: Composition API를 사용하고 있습니다.

덧붙여서 나처럼 어려움을 겪는 사람이 있다면 메서드는 대소문자를 구분하는 단어라는 것을 알아두십시오.

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

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

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

인스턴스화 중에 구성 요소 속성을 상태 속성에 할당하려고 하면 이 오류가 발생했습니다.

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

두 번 vue 인스턴스를 사용하는 경우.그러면 이 오류가 나타납니다.예를 들어 app.js와 뷰 파일 내의 사용자 고유의 스크립트 태그가 있습니다.한 번만 사용

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

문제는 데이터 오브젝트 안에 메서드를 배치하는 것이었습니다.이렇게 포맷하면 잘 될 거예요.

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

저 같은 경우에는 '방법'이 아니라 '방법'으로 썼어요.바보같다.1시간 정도 낭비했어요.

부에즈 써서 요.computed:부에즈래래만면면면면면면면면면면면면면면면면면면면면면면면면면면면!

는 두 잔 마셨다methods: <script>단순한 실수를 찾기 위해 몇 시간씩 시간을 할애할 수 있다는 것을 보여줍니다.

내 경우 오류가 발생하고 올바른 기입을 하면서도 콘솔에서 오류가 발생한 속성입니다.Ctrl+F5를 누르면서 Voila! 오류를 제거할 때까지 많은 것을 검색했지만 아무 것도 작동하지 않았습니다.:'v'

여기에 있는 몇 가지 답변은 훌륭할 수 있지만, 내 사례에 도움이 되는 답변은 없습니다(이것은 OP의 오류 메시지와 매우 유사합니다).

이 오류는 컴포넌트가 데이터를 사용하여 렌더링(API에서 꺼냄)되었지만 FireBase 호스팅에 배포되었을 때 일부 컴포넌트(데이터에 의존하는 컴포넌트)를 렌더링하지 않았기 때문에 수정이 필요했습니다.

이 문제를 수정하기 위해(그리고 승인된 답변의 제안을 따라준 경우), Parent 컴포넌트(데이터를 가져와 자녀 컴포넌트로 전달)에서 다음 작업을 수행했습니다.

// pulled data in this life cycle hook, saving it to my store
created() {
  FetchData.getProfile()
    .then(myProfile => {
      const mp = myProfile.data;
      console.log(mp)
      this.$store.dispatch('dispatchMyProfile', mp)
      this.propsToPass = mp;
    })
    .catch(error => {
      console.log('There was an error:', error.response)
    })
}
// called my store here
computed: {
    menu() {
        return this.$store.state['myProfile'].profile
    }
},

// then in my template, I pass this "menu" method in child component
 <LeftPanel :data="menu" />

이것으로 에러가 해소되었습니다.파이어베이스 호스트랑 비올라에 다시 배치했어!

이게 도움이 됐으면 좋겠네요.

경고의 두 배를 확인합니다.속성 ___은 렌더링 중에 액세스되었지만 인스턴스에서 정의되어 있지 않습니다.그래서 그걸 정의해야 해요...예를 들어 Vuejs 앱에서 변수를 인스턴스화하는 데이터 함수에서 문제가 해결되었습니다.그건 모두 민중의 것이다!

제 경우, 제가 깜빡 잊고return키워드:

computed: {
    image(){
        this.productVariants[this.selectedVariant].image;
    },
    inStock(){
       this.productVariants[this.selectedVariant].quantity;
    }
}

변경 내용:

computed: {
    image(){
        return this.productVariants[this.selectedVariant].image;
    },
    inStock(){
       return this.productVariants[this.selectedVariant].quantity;
    }
}

라우터 이름이 문자열에 없기 때문에:

:to="{name: route-name, params: {id:data.id}}"

string 내의 라우터 이름으로 변경합니다.

:to="{name: 'router-name', params: {id:data.id}}"

제 경우 하드 코드화된 텍스트 값을 다른 컴포넌트에 전달하려고 했습니다.

 ChildComponent(:displayMode="formMode")

필요한 경우:

ChildComponent(:displayMode="'formMode'")

컴포넌트 내의 로컬 변수를 호출하지 않고 텍스트를 나타내는 작은 따옴표를 적어 둡니다.

이 에러의 일반적인 예

• 구성 요소에 데이터 속성의 철자가 올바른지 확인하십시오.
• 템플릿이 다른 컴포넌트의 템플릿 내에 정의되어 있는지 확인합니다.
• 데이터 개체 내부에 변수를 정의했는지 확인하십시오.
• 라우터 이름이 문자열인지 확인합니다.

용액을 좀 더 가져와라

Vue3를 사용하는 경우<script setup>style을 지정했는지 확인합니다.setup스크립트 태그의 선두 스크립트 태그:

<script setup>

나는 오래된 습관에 빠져서 단지 한 블록만 만들었다.<script>하지만 그걸 알아차리는데 시간이 좀 걸렸어요.

https://v3.vuejs.org/api/sfc-script-setup.html

소품이나 Import 변수가 있는 경우(외부 .variable 파일에서) 다음과 같이 작성된 변수를 사용하여 적절하게 설정하십시오.

다음 변수를 초기화해야 합니다.

import { var1, var2} from './constants'

//or

export default {
     data(){
      return {
       var1: 0,
       var2: 0,
       var3: 0,
      },
    },
    props: ['var3'],
    created(){
     this.var1 = var1;
     this.var2 = var2;
     this.var3 = var3;
     }
    

저는 컴포넌트를 재작성하고 오류가 사라졌습니다.내가 처음 파트에 있어서 다행이야. 이상해.편집: composition api를 사용하고 있었습니다.

저는 스크립트 태그를 닫는 것을 잊었을 뿐입니다:-)

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