Having some issues creating a child div with Vue. The code is being placed correctly, but it's being stored as an array.
<template>
<div class="containers" v-bind:style="{ backgroundColor: pageStyle.backgroundColor, paddingLeft:'5%', paddingRight:'5%',}">
<div class="progress under_part">
<div class="border_container">
{{renderSeparator}}
</div>
<div class="progress-bar progress-bar-success" v-bind:style="{ width: this.progressBar }"></div>
</div>
</div>
</template>
<script>
computed:{
renderSeparator: function() {
const { page } = this.pageData;
let totalPages = page.TOTAL_PAGES;
let separator = [];
for(var i = 1; i <= totalPages; i++) {
separator.push('<div className="separator"></div>')
}
return separator;
},
},
</script>