1

Estoy haciendo una request con axios y vue.js a una API, los datos los almaceno en una matriz pero solo deseo mostrar el primer campo de la matriz. esto es como hago la impresion pero al momento de hacer la impresion como estoy haciendo el "v-for" me imprime todos los datos de la matriz

  <div v-for="programa in programas" class="col-sm-12 post interview">
    <div class="row m0 featured_img">
      <div class="video">
        <iframe width="640" height="360" v-bind:src="programa.urls_video[1].url" type="mp4" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>

y esta es la solicitud a la api:

<script>
export default {
  data: () => ({
    errors: [],
    programas: []
  }),
  mounted() {
    axios.get('xxxxxxxxxx')
      .then(response => {
        this.programas = response.data
      }),
  }
}
</script>

alguna de como puedo solo los primeros datos de la matriz???

2
  • ¿Cual es la estructura de datos que devuelve el API? Commented el 1 jul. 2017 a las 1:03
  • El formato en el que se regresa es Json Commented el 1 jul. 2017 a las 16:10

1 respuesta 1

0

Hola ya vi como se puede hacer el despliegue de los datos en este caso utilize un "Limit" que en la nueva version de vue se llama "slice" y lo hize de la siguiente forma:

<script>
export default {
  data: () => ({
    errors: [],
    programas: []
  }),
  mounted() {
    axios.get('xxxxxxxxxx')
      .then(response => {
        this.programas = response.data
      })
  },
  computed: {
    filteredItems: function() {
      return this.programas.slice(0, 1) //filtro para mostrar solo un elemnto en el video relacionado del programa
    }
  }
}
</script>

y lo mostre en la vista de la siguiente manera

 <div v-for="programa in filteredItems" class="col-sm-12 post interview">
    <div class="row m0 featured_img">
      <div class="video">
        <iframe width="640" height="360" v-bind:src="programa.urls_video[1].url" type="mp4" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>

espero que sea de utilidad para alguien que tenga el mismo caso que yo tuve.

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.