Vue js 3, v-html button click event 처리 (버튼 클릭 이벤트)

최근 프로젝트에 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 값 가져와서 특정 함수에 전달

다른 방법도 있는 것 같지만 간단하게 처리하는 것에는 적합한 것 같아서 알려드립니다.