Replicate DIV, alter content?

Question

I’m having a "certain" difficulty. I have a DIV that contains content that resembles a bill, all this content comes from an API (minus the div of course). However, I need you in the field DESCRIPTION have more than 200 characters, it replicates all my current div (add it below) changing only the content of the description

let numbers = 'Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem. Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32. O trecho padrão original de Lorem Ipsum, usado desde o século XVI, está reproduzido abaixo para os interessados. Seções 1.10.32 e 1.10.33 de "de Finibus Bonorum et Malorum" de Cicero também foram reproduzidas abaixo em sua forma exata original, acompanhada das versões para o inglês da tradução feita por H. Rackham em 1914.'

I thought of some way to do this, but I don’t know how to do it, so that all the current content remains and only the content of the description is changed

RESULT YOU WOULD LIKE (EXAMPLE)

<div class="result">
    <!-- SEMPRE SERÁ IGUAL EM TODOS -->
    <h1>TITULO</h1>
    
    <p>Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica</p>
</div>

<div class="result">
    <!-- SEMPRE SERÁ IGUAL EM TODOS -->
    <h1>TITULO</h1>
    
    <p>descobriu a sua indubitável origem. Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..."</p>
</div>

<div class="result">
    <!-- SEMPRE SERÁ IGUAL EM TODOS -->
    <h1>TITULO</h1>
    
    <p>vem de uma linha na seção 1.10.32. O trecho padrão original de Lorem Ipsum, usado desde o século XVI, está reproduzido abaixo para os interessados. Seções 1.10.32 e 1.10.33 de "de Finibus Bonorum et Malorum" de Cicero também foram reproduzidas abaixo em sua forma exata original, acompanhada das versões para o inglês da tradução feita por H. Rackham em 1914.</p>
</div>

In the example, it would repeat the div 3 times, keeping the title, changing only the description, but this amount of times, would depend on how many characters are allowed by replica.

Answer 1

I believe this is what you need. See if you are correct, in case you are, I will comment on the items to get a better understanding.

new Vue({
  el: "#app",
  data: {
    separaTextoEmNCaracteres: 200,
    tituloPadrao: 'Título Padrão',
    texto: 'Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem. Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32. O trecho padrão original de Lorem Ipsum, usado desde o século XVI, está reproduzido abaixo para os interessados. Seções 1.10.32 e 1.10.33 de "de Finibus Bonorum et Malorum" de Cicero também foram reproduzidas abaixo em sua forma exata original, acompanhada das versões para o inglês da tradução feita por H. Rackham em 1914.',
  },
  methods: {
    separaTexto: function(texto, num) {
      var regex = new RegExp(".{1," + num + "}", 'g');
      return texto.match(regex);
    }
  },
  computed: {
    textoSplited: function() {
      return this.separaTexto(this.texto, this.separaTextoEmNCaracteres);
    }
  }
});

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

<div id="app">

  <div class="result" v-for="result in textoSplited">
    <h1>{{ tituloPadrao }}</h1>
    <p>{{ result }}</p>
  </div>

</div>

Answer 2

Assuming the property that you set the answer to the api in artigos I suggest you have a loop to iterate this array that the API gives and within that loop have a if to duplicate the content.

Suggestion:

<template for="{artigo in artigos}">
    <div class="result">
        <h1>{{artigo.title}}</h1>
        <p>{{artigo.description}}/p>
    </div>
    <div class="result" v-if="artigo.description.length > 200">
        <h1>{{artigo.title}}</h1>
        <p>{{artigo.description}}/p>
    </div>
</template>