0

soy nuevo en vuejs y me surgió el siguiente problema al renderizar un objeto con el metodo v-for el contenido no respeta el max-width de css ni las col de boostrap... alguna idea ?

<div class="pre-scrollable" style="height:120px;" >
        <div class="container">
          <div class="row">
              <div class="col-md-4" v-for="item in respuestas" >
                <p>Lorem ipsum dolor sit amet, consectetur adip</p>
                <p v-bind:class="[test]">{{item}} </p>
          </div>
        </div>
      </div>
    </div>

screenshot del problema

1
  • Si el valor de item es un string sin espacios, va a intentar meterlo todo en el mismo div en una sola línea. Si no puedes separar ese texto con espacios, puedes probar dándole overflow: hidden al contenedor, pero eso te funcionará siempre y cuando éste o uno de los padres tenga un ancho fijo o un max-width en pixeles (no en porcentaje)
    – ffflabs
    Commented el 25 jul. 2018 a las 23:31

1 respuesta 1

0

Intenta usar el v-for en un template:

<template v-for="item in respuestas">
  <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, consectetur adip</p>
    <p v-bind:class="[test]">{{item}} </p>
  </div>
</template>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.