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가 계산 된 속성 변수를 인식하지 못 하기 때문에 여기에 왔습니다. 따라서 이와 같은 오류가 발생하면 먼저 맞춤법을 확인하십시오!
