While using the OSS "vuejs-paginate" component, I came across the following scenario: We need to pass a component as a property - we have no access to the Paginate component itself of course.
I assume we need to pre-render the component, get the HTML and pass it as a string to the "prev-text" property.
I tried accessing the outerHTML property which could be our solution but no idea where to render the component. (using SFCs)
Vue.component('paginate', VuejsPaginate)
Vue.component('Icon', {
template: ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <
path
d = "M19.5 8.07422L12.3533 15.2202C12.2597 15.314 12.1326 15.3667 12 15.3667C11.8674 15.3667 11.7403 15.314 11.6467 15.2202L4.5 8.07422"
stroke = "currentColor"
stroke - width = "1.25"
stroke - linecap = "round"
stroke - linejoin = "round" /
>
<
/svg>`
})
const app = new Vue({
el: '#app',
data: {
message: 'Trying to pass a component in the prev-text prop (it accepts HTML)'
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuejs-paginate@latest"></script>
<div id="app">
{{ message }}
<paginate :page-count="20" :prev-text="`<icon />`" :next-text="'Next'" :container-class="'className'" />
</div>