【Vue.js】복수의 카운트 버튼을, 각각 누른 수만큼 카운트시키고 싶다【Component】
문제
Vue.js의 Component 공부를 위해 카운터를 만들었을 때입니다.
한 버튼을 누르면 다른 버튼의 카운트도 늘어나는 문제가 발생.
환경
코드
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Components</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
<button-counter message="Counter A"></button-counter>
<button-counter message="Counter B"></button-counter>
<button-counter message="Counter C"></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="js/main.js"></script>
</body>
</html>
js/main.js(function () {
'use strict';
const counter = {
count: 0
};
const countComponent = Vue.extend({
template: '<button @click="countUp">{{ message }}: {{ count }}</button>',
props: {
message: {
type: String,
},
},
data: function () {
return counter;
},
methods: {
countUp: function () {
this.count++;
},
},
});
const vm = new Vue({
el: '#app',
components: {
'button-counter': countComponent,
},
});
})();
원인
참조를 읽으면,
구성 요소의 data 옵션은 함수여야 합니다. 각 인스턴스가 반환되는 데이터 객체의 별도 복사본을 유지할 수 있기 때문입니다.
라는 설명이 있었습니다.
참조 : 【Vue.js 가이드】data는 함수여야 합니다.
각각의 카운트 버튼 인스턴스에 돌려주어지는 값을 독립시키기 위해서, data 옵션을 함수로 해야 하는군요.
해결
레퍼런스에 기술의 방법이 제대로 써 있었습니다.
data: function () {
return {
count: 0
}
}
Vue에이 규칙이 없으면 버튼을 클릭하면 다음과 같이 모든 다른 인스턴스의 데이터에 영향을줍니다.
정중하게 이번 사건의 예도 제시하고 있었습니다.
수정 후 이렇게 되었습니다.
js/main.js(function () {
'use strict';
// 削除
// const counter = {
// count: 0
// };
const countComponent = Vue.extend({
template: '<button @click="countUp">{{ message }}: {{ count }}</button>',
props: {
message: {
type: String,
},
},
// 変更-----
data: function () {
return {
count: 0,
};
},
// -----
methods: {
countUp: function () {
this.count++;
},
},
});
const vm = new Vue({
el: '#app',
components: {
'button-counter': countComponent,
},
});
})();
제대로 각각의 버튼의 압하수를 카운트 해 줍니다.
반성
덧붙여서 countComponent 안에서 data 옵션을 함수로 하지 않고 count를 정의하려고 하면, Vue.js 쪽에서 ReferenceError: count is not defined 라고 에러가 되는 것을 가르쳐 주었습니다.
원래 count는 별도로 정의하는 것이 아니라, 처리를 하고 있는 인스턴스내에서 설정하면 좋았지요.
참조
【Vue.js 가이드】data는 함수여야 합니다.
Reference
이 문제에 관하여(【Vue.js】복수의 카운트 버튼을, 각각 누른 수만큼 카운트시키고 싶다【Component】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fukuzono/items/d7366539b3b88e677832
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Components</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app">
<button-counter message="Counter A"></button-counter>
<button-counter message="Counter B"></button-counter>
<button-counter message="Counter C"></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="js/main.js"></script>
</body>
</html>
(function () {
'use strict';
const counter = {
count: 0
};
const countComponent = Vue.extend({
template: '<button @click="countUp">{{ message }}: {{ count }}</button>',
props: {
message: {
type: String,
},
},
data: function () {
return counter;
},
methods: {
countUp: function () {
this.count++;
},
},
});
const vm = new Vue({
el: '#app',
components: {
'button-counter': countComponent,
},
});
})();
참조를 읽으면,
구성 요소의 data 옵션은 함수여야 합니다. 각 인스턴스가 반환되는 데이터 객체의 별도 복사본을 유지할 수 있기 때문입니다.
라는 설명이 있었습니다.
참조 : 【Vue.js 가이드】data는 함수여야 합니다.
각각의 카운트 버튼 인스턴스에 돌려주어지는 값을 독립시키기 위해서, data 옵션을 함수로 해야 하는군요.
해결
레퍼런스에 기술의 방법이 제대로 써 있었습니다.
data: function () {
return {
count: 0
}
}
Vue에이 규칙이 없으면 버튼을 클릭하면 다음과 같이 모든 다른 인스턴스의 데이터에 영향을줍니다.
정중하게 이번 사건의 예도 제시하고 있었습니다.
수정 후 이렇게 되었습니다.
js/main.js(function () {
'use strict';
// 削除
// const counter = {
// count: 0
// };
const countComponent = Vue.extend({
template: '<button @click="countUp">{{ message }}: {{ count }}</button>',
props: {
message: {
type: String,
},
},
// 変更-----
data: function () {
return {
count: 0,
};
},
// -----
methods: {
countUp: function () {
this.count++;
},
},
});
const vm = new Vue({
el: '#app',
components: {
'button-counter': countComponent,
},
});
})();
제대로 각각의 버튼의 압하수를 카운트 해 줍니다.
반성
덧붙여서 countComponent 안에서 data 옵션을 함수로 하지 않고 count를 정의하려고 하면, Vue.js 쪽에서 ReferenceError: count is not defined 라고 에러가 되는 것을 가르쳐 주었습니다.
원래 count는 별도로 정의하는 것이 아니라, 처리를 하고 있는 인스턴스내에서 설정하면 좋았지요.
참조
【Vue.js 가이드】data는 함수여야 합니다.
Reference
이 문제에 관하여(【Vue.js】복수의 카운트 버튼을, 각각 누른 수만큼 카운트시키고 싶다【Component】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fukuzono/items/d7366539b3b88e677832
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
data: function () {
return {
count: 0
}
}
(function () {
'use strict';
// 削除
// const counter = {
// count: 0
// };
const countComponent = Vue.extend({
template: '<button @click="countUp">{{ message }}: {{ count }}</button>',
props: {
message: {
type: String,
},
},
// 変更-----
data: function () {
return {
count: 0,
};
},
// -----
methods: {
countUp: function () {
this.count++;
},
},
});
const vm = new Vue({
el: '#app',
components: {
'button-counter': countComponent,
},
});
})();
덧붙여서 countComponent 안에서 data 옵션을 함수로 하지 않고 count를 정의하려고 하면, Vue.js 쪽에서
ReferenceError: count is not defined 라고 에러가 되는 것을 가르쳐 주었습니다.원래 count는 별도로 정의하는 것이 아니라, 처리를 하고 있는 인스턴스내에서 설정하면 좋았지요.
참조
【Vue.js 가이드】data는 함수여야 합니다.
Reference
이 문제에 관하여(【Vue.js】복수의 카운트 버튼을, 각각 누른 수만큼 카운트시키고 싶다【Component】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/fukuzono/items/d7366539b3b88e677832
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(【Vue.js】복수의 카운트 버튼을, 각각 누른 수만큼 카운트시키고 싶다【Component】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/fukuzono/items/d7366539b3b88e677832텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
