create child div in vue

Question

I am trying to make a child div with vue but its not going as expected. it does put the code into the right spot but it keeps it 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>

Answer 1

So I think you may be taking an incorrect route to display computed information. If you want to continue on your current route, I would recommend taking a look at the v-html directive.

Otherwise, I would recommend the following:

new Vue({
  el: "#app",
  data: {
    pageData: {
      page: {
        TOTAL_PAGES: 5
      }
    }
  },
  computed: {
    renderSeparator () {
      const { page } = this.pageData;
      console.log(page)
      let totalPages = page.TOTAL_PAGES;
      let separator = [];
      for(var i = 1; i <= totalPages; i++) {
        separator.push(`Page ${i}`)
      }
      return separator;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="containers">
    <div class="progress under_part">
      <div class="border_container">
      
        <template v-for="separator in renderSeparator">
          <div class="separator">{{ separator }}</div>
        </template>
        
      </div>
      <div class="progress-bar progress-bar-success" v-bind:style="{ width: this.progressBar }">      </div>
    </div>
  </div>
</div>

Let me know if I'm misunderstanding anything or if you have any questions.