0

deseo hacer una conexion a otra vista y utilizar los parametros de la primera vista en el

landig page: video_populares.vue

con vue.js + rails, pero estoy confundido por los ejemplos que encuentro no utilizan para metros de una API, estare agradecido si me pueden ayudar, este es el codigo:

popular_vue.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')
  // console.log(app)
})

popular.vue :

template con llamado del servicio http con axios e insertados en el template son nombre de video y la imagen

<div v-for="nota in notas_p">
      <div class="col-sm-3 post post-6">
        <div class=" m0 inner">
          <div class=" m0 featured_img">
            <a href="#"><img v-bind:src="nota.image_url" alt=""></a>
          </div>
          <div class=" m0 post_contents">
            <div class="m0 category sports">
            </div>
            <h3 class="post_title">
                    <a href="#">{{nota.name}}</a>
                  </h3>
            <ul class="post_meta nav nav-pills">
              <li></li>
            </ul>
          </div>
        </div>
      </div>
<script>
export default {
  data: {
    notas_p: []
  },
  mounted() {
    axios.get("xxxxxxx")
      .then(response => {
        this.notas_p = response.data
      })
  }
}
</script>

segunda vista video_populares_vue.js :

import Vue from 'vue'
import Video_populares from './video_populares.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('video_populares'))
  const video_populares = new Vue(Video_populares).$mount('video_populares')
})

video_populares.vue :

en esta vista se imprimiran los datos de la vista anterior cuando se haga la trasicion.

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

    <div class="video">
      <iframe width="640" height="360" src="#" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
<script>
export default {
  data: {
    notas_p: []
  },
  mounted() {
    axios.get("xxxxxx")
      .then(response => {
        this.notas_p = response.data
      })
  }
}
</script>

routas en rails:

  root 'pages#index'
  get 'pages/index'

  get 'programs/index'
  get 'programs/show'
2
  • Hola Julio, te serviría hacer un componente y enviarle los datos al componente para su visualización? o querés redirigir al usuario a otra pagina donde va a estar dicha visualización? Commented el 6 jun. 2017 a las 18:05
  • me serviria la de redirigir al usuario a otra vista ya que tengo creado dos vistas "video_populares.vue" y "video_programas.vue" con la ruta "programs/index" y "programs/show" Commented el 6 jun. 2017 a las 18:13

1 respuesta 1

0

Este es un ejemplo como se puede hacer el cambio, les dejo un ejemplo en caso de que alquien tenga dudas como yo tuve:

en route.rb:

  get 'index' => 'pages#index'
  get 'regalos' => 'regalo#index'
  get 'acerca' => 'acerca#index'

y en la vista navbar.vue:

      <ul>
        <li><a v-bind:href="'/index'">Index</a></li>
        <li><a v-bind:href="'/regalos'">Regalos</a></li>
        <li><a v-bind:href="'/acerca'">Acerca de</a></li>
     </ul>

y para pasar con un parametro en especifico se hace de esta forma:

route.rb:

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

index.vue:

  <div v-for="video in videos_p">
      <h3 class="post_title">
        <a v-bind:href="'/programas/' + video.program.slug + '/videos/' + video.slug">{{video.name}}</a>
       </h3>
</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.