[Vuejs]-Create child div in vue

by

0👍

✅

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.

Leave a comment