создать дочерний div в vue

Question

Я пытаюсь сделать ребенка div с vue, но все идет не так, как ожидалось. он помещает код в правильное место, но сохраняет его как массив.

<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

Так что я думаю, что вы выбираете неправильный маршрут для отображения вычисленной информации. Если вы хотите продолжить свой текущий маршрут, я бы рекомендовал взглянуть на директиву v- html .

В противном случае я бы порекомендовал следующее:

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>

Дайте мне знать, если я что-то неправильно понимаю или у вас есть какие-либо вопросы.