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