728x90
최근 프로젝트에 Vue.js 3 버전을 사용 중인데,
v-html 을 이용해서 html 태그가 포함된 문자열을 반환 중 Button Click 버튼 클릭 이벤트를 처리야햐 하는
경우가 발생해서 제가 처리했던 방안을 알려드립니다.
버튼 클릭 시 해당 버튼의 페이지 값을 Parameter 로 전달하하는 간단한 방법입니다.
<script type="module">
import { createApp, ref, reactive, onMounted } from 'vue'
import ButtonCounter from "/components/test/test.js";
createApp({
setup() {
const pagingStr = ref('');
function fnGoPage(pageNum) {
console.log(pageNum);
}
function pageMake(pageNumber) {
pagingStr.value = "<button class='btn btn-light active' data-page='1'>1</button><button class='btn btn-light active' data-page='2'>2</button>";
}
function handleClick(e) {
let page = e.target.dataset.page;
if (page !== undefined){
fnGoPage(page);
}
}
onMounted(() => {
})
return {
pagingStr,
fnGoPage,
handleClick
}
}
}).mount('#app')
</script>
<div class="paginate" v-html="pagingStr" v-on:click="handlelineclick"></div>
- Button에 data-page attribute 활용하여 Parameter 전달
- 클릭 이벤트를 Parent div 에 적용
- 클릭 이벤트 리스너를 통해서 dataset 의 page 값 가져와서 특정 함수에 전달
다른 방법도 있는 것 같지만 간단하게 처리하는 것에는 적합한 것 같아서 알려드립니다.
반응형
'팁 & 노하우 > C#' 카테고리의 다른 글
C# .net core 카카오워크(kakaowork), 다음(daum), 카카오(kakao) 메일 SMTP 발송하기 (0) | 2024.08.01 |
---|---|
C#, .net 8, core, MVC HttpResponseMessage XML to JSON 변환 (0) | 2024.02.29 |
영화진흥위원회 오픈API 활용 C#, .net 8.0, MVC, Vue.js (0) | 2024.02.20 |
C# 날짜 시간 변환 format 과 DateTime.ParseExact 만 알면 뭐든지 해결 (0) | 2023.11.06 |
c# 반복문 foreach, for 에서 인덱스 번호 가져오기 (0) | 2023.11.02 |