0

estou com uma "certa" dificuldade. Tenho uma DIV que contem um conteúdo que se assemelha a uma nota fiscal, todo esse conteúdo vem de uma API (menos as div é claro). Porem, preciso que ao campo DESCRIPTION possuir mais de 200 caracteres, ele replique toda minha div atual (adicione ela a baixo) mudando apenas o conteúdo da descrição

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.'

Pensei em algumas maneira de fazer isso, mas não sei como fazer, para que, todo o conteúdo atual permaneça e apenas o conteúdo da descrição seja alterado

RESULTADO QUE GOSTARIA (EXEMPLO)

<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>

No exemplo, ele iria repetir a div 3 vezes, mantendo o titulo, mudando apenas a descrição, porem essa quantidade de vezes, iria depender de quantos caracteres são permitidos por replica.

10
  • Podes explicar melhor como está o HTML e dar um exemplo de como deve ficar?
    – Sergio
    14/07/2017 às 18:10
  • @Sergio eu atualizei, vê se consegue entender melhor agora 14/07/2017 às 18:21
  • Então o conteúdo do p vem da API certo? e caso esse conteúdo tenha mais de 200 caracteres queres repetir o bloco div.result? essa parte não percebi bem
    – Sergio
    14/07/2017 às 18:28
  • @RafaelAugusto, deixe me entender. Você receberia da API um texto Ok? Será 1 texto ou N textos? Se for 1 texto, você gostaria de dividir ele em blocos de 200 em 200 caracteres? 14/07/2017 às 18:36
  • @Sergio Exatamente, um texto, que pode conter de 1 caracteres, a 100 mil caracteres 14/07/2017 às 18:38

2 Respostas 2

2

Acredito ser isto que precisa. Veja se está correto, caso esteja, vou comentar os itens para ficar de melhor entendimento.

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>

1

Assumindo que a propriedade que setas a resposta da api em artigos sugiro teres um loop para iterar essa array que a API dá e dentro desse loop ter um if para duplicar o conteúdo.

Sugestão:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .