Due to certain requirements, I need to utilize virtual DOM. Below is the code snippet that I am working with:
// test.js
import { h, ref } from 'vue'
const ButtonCounter = {
name: 'button-counter',
props: {
tag: {
type: String,
default: 'div'
}
},
setup (props) {
const sliderClass = ref('slider-slide')
return () => {
return h(props.tag, {
class: sliderClass.value
})
}
}
}
export { ButtonCounter }
<template>
<div>
<div id="components-demo">
<!-- inserting <img>tag in virtual DOM -->
<button-counter tag="span"><img src="../assets/images/red.jpg" alt=""></button-counter>
</div>
</div>
</template>
<script>
import { ButtonCounter } from '../assets/js/test'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
export default {
name: 'TestView',
components: {
ButtonCounter,
Swiper,
SwiperSlide
},
setup () {
}
}
</script>
My expectation was for
<img src="../assets/images/red.jpg" alt=""><span class="slider-slide"></span>Please advise on how I can resolve this issue. Your assistance is greatly appreciated.