Replicate DIV, change content?

Navigation
0

I have a "certain" difficulty. I have a DIV that contains content that looks like a nota fiscal, all that content comes from an API (minus the div of course). However, I need the field DESCRIPTION to have more than 200 characters, it replicates all my current div (add it down) by changing only the contents 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 do not know how to do it, so that all current content remains and only the content of the description changes

RESULT THAT I 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, holding the title, changing only the description, but this amount of times, would depend on how many characters are allowed by replica.

    
asked by anonymous 14.07.2017 / 19:42

2 answers

2

I believe this is what you need. See if it is correct, if it is, I will comment on the items to be of 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><divid="app">

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

</div>
    
14.07.2017 / 20:48
1

Assuming the property that you set the api response to artigos I suggest looping to iterate this array that the API gives and within that loop have a if to duplicate 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>
    
14.07.2017 / 21:08
Difficulty in reading XML in Java Functions run out of order