반응형
Vue.js를 사용하여 클릭 시 특정 하위 요소를 업데이트하려면 어떻게 해야 합니까?
클릭 이벤트가 첨부된 항목 목록이 있는 경우 Vue.js(2.0)를 사용하여 클릭된 하위 요소에 특정 변경 사항을 적용하려면 어떻게 해야 합니까?다음은 예를 제시하겠습니다.
HTML:
<div id="root">
<div class="selection">
<div class="option" v-for="option in options" @click="processSelection(option)">
<p class="text">{{ option.text }}</p>
<p class="feedback"></p>
</div>
</div>
</div>
Javascript:
new Vue({
el: '#root',
data: {
options: [
{ text: 'First option', feedback: 'First option feedback' },
{ text: 'Second option', feedback: 'Second option feedback' },
{ text: 'Third option', feedback: 'Third option feedback' },
{ text: 'Fourth option', feedback: 'Fourth option feedback' },
]
},
methods: {
processSelection(option) {
alert(option.text + ' was clicked');
//Update the respective feedback div
//...
}
}
});
그러면 항목 목록이 표시됩니다.예를 들어 세 번째 항목을 클릭하면 해당 항목을 업데이트하려면 어떻게 해야 합니까?.feedback관련 피드백 텍스트로 차단할 수 있습니까?다음은 JS Bin의 코드입니다.https://jsbin.com/ricewuf/edit?html,js,output
옵션 오브젝트에 showFeedback과 같은 다른 부울 속성을 두고 그 값을 변경하여 피드백을 표시할 수 있습니다.
코드로 표시하는 것이 좋습니다. : )
JS
https://jsbin.com/diquwemiti/edit?html,js,output
new Vue({
el: '#root',
data: {
options: [
{ text: 'First option', feedback: 'First option feedback', showFeedback: false},
{ text: 'Second option', feedback: 'Second option feedback', showFeedback: false },
{ text: 'Third option', feedback: 'Third option feedback', showFeedback: false },
{ text: 'Fourth option', feedback: 'Fourth option feedback', showFeedback: false },
]
},
methods: {
processSelection(option) {
option.showFeedback = true
}
}
});
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="root">
<div class="selection">
<div class="option" v-for="option in options" @click="processSelection(option)">
<p class="text">{{ option.text }}</p>
<p class="feedback" v-if="option.showFeedback">{{ option.feedback }}</p>
</div>
</div>
</div>
</body>
</html>
원래 이벤트를 이벤트핸들러에 전달하고, 이 이벤트를 찾을 수 있습니다..feedbackdiv:
new Vue({
el: '#root',
data: {
options: [{
text: 'First option',
feedback: 'First option feedback'
}, {
text: 'Second option',
feedback: 'Second option feedback'
}, {
text: 'Third option',
feedback: 'Third option feedback'
}, {
text: 'Fourth option',
feedback: 'Fourth option feedback'
}, ]
},
methods: {
processSelection(option, e) {
var target = e.currentTarget;
var feedback = target.querySelector('.feedback');
feedback.innerHTML = option.feedback;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js">
</script>
<div id="root">
<div class="selection">
<div class="option" v-for="option in options" @click="processSelection(option, $event)">
<p class="text">{{ option.text }}</p>
<p class="feedback"></p>
</div>
</div>
</div>다음은 이에 대한 몇 가지 문서입니다.
언급URL : https://stackoverflow.com/questions/41302235/how-do-you-update-a-specific-child-element-on-click-using-vue-js
반응형
'sourcecode' 카테고리의 다른 글
| PTHREAD_MUTEX_INITIALIZER vs pthread_mutex_init (&mutex, param) (0) | 2022.08.30 |
|---|---|
| 실행 중인 프로세스를 나열하는 Linux API? (0) | 2022.08.30 |
| 오류: Java 가상 시스템 Mac OSX Mavericks를 생성할 수 없습니다. (0) | 2022.08.30 |
| printf의 %s 지정자를 사용하여 NULL을 인쇄하는 동작은 무엇입니까? (0) | 2022.08.30 |
| 알고리즘: 어레이에서 중복 정수를 효율적으로 삭제하는 방법 (0) | 2022.08.30 |