0

Estoy trabajando rails con vue.js y estoy tratando de pasar los parámetros, cuando haga click en una imagen para desplegar el video en especifico.

Este es mi código de como hago la solicitud con "axios" y hago en cambio de vista:

popular.js :

import Vue from 'vue'
import Popular from './popular.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('popular'))
  const popular = new Vue(Popular).$mount('popular')

})

popular_vue.vue

  <div v-for="video in videos_p">
        <div class=" m0 featured_img">
            <a v-bind:href="'/programas/' + video.program.slug + '/videos/' + video.slug"><img v-bind:src="video.image_url" alt=""></a>
          </div>
   </div>

<script>
export default {
  data: {
    videos_p: []
  },
  mounted() {
    axios.get("xxxxxxxxxxxxxxx")
      .then(response => {
        this.videos_p = response.data
      })
  }
}
</script>

con eso paso a la otra vista cuando le hago click a la imagen, con la url de la imagen:

http://localhost:5000/programas/detras-de-un-cafe/videos/homenaje-a-matias-arrizabalaga-un-ser-excepcional

como puedo recibir los datos en la nueva vista para hacer el despliegue del video que corresponde, este es el codigo de la nueva vista:

index.js

import Vue from 'vue'
import Index from './Index.vue'

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById("populars-index")
  const props = JSON.parse(node.getAttribute('data'))
  new Vue({
    render: h => h(Index, {
      props
    })
  }).$mount('#populars-index');
})

index.vue:

      <div class="col-sm-12 post interview">
        <div class="row m0 featured_img">

          <div class="video">
            <iframe width="640" height="360" src="#" type="mp4" frameborder="0" allowfullscreen></iframe>
          </div>
        </div>
      </div>

<script>
export default {
  props: ["apiKey"],
  data: () => ({
    errors: [],
    videos: []
  }),
  mounted() {
    axios.get("xxxxxxxxxxxxxxxxxxxxxxxxxxxx")
      .then(response => {
        this.videos = response.data
      }),
      console.log(this.apiKey);
  }
}
</script>

index.html.erb:

<%= javascript_pack_tag 'programs/index'%>

<%= content_tag :div,
id: "programs-index",
data: {
  apiKey: "datos de muetra"
}.to_json do %>
<% end %>

Alguna idea de como hacer ese despliegue en especifico?????

1 respuesta 1

0

Este paso de datos me lo explico un amigo y lo dejo en caso que alguien este con la misma duda:

modifica la routa con el nombre de los parametros:

get 'programas/:Pslug/videos/:Vslug' => "programs#index"

se agrega dos parametros que obtendran los slug

index.html.erb:

<%= javascript_pack_tag 'programs/index'%>

<%= content_tag :div,
id: "programs-index",
data: {
  videoSlug: params[:Vslug],
  programsSlug: params[:Pslug]
}.to_json do %>
<% end %>

index.vue

<script>
export default {
  props: ["videoSlug", "programsSlug"],
  data: () => ({
    errors: [],
    videos: []
  }),
  mounted() {
    axios.get('xxxxxxxxxxx' + this.videoSlug) //en este caso la api solo necesita el slug para hacer la busqueda
      .then(response => {
        this.videos = response.data
      }),
      console.log('video slug ' + this.videoSlug) //muestra en consola el parametro como prueba del envio de datos
    console.log('programs slug ' + this.programsSlug)
  }
}
</script>

y se imprime :

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

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.