how to make a v-link connection with vue.js + rails?

Question

how to make a v-link connection with vue.js + rails?

Navigation

#1 by (0 votes)

0

I want to make a connection to another view and use the parameters of the first view in the

landig page: video_populares.vue

with vue.js + rails, but I am confused by the examples that I find do not use for meters of an API, I will be grateful if you can help me, this is the code:

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 with http service call with axios and inserted in the template are video name and image

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

second view 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:

in this view, the data from the previous view will be printed when the transition is made.

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

javascript ruby-on-rails vue.js

asked by JULIO MACHAN 06.06.2017 в 20:02

source

1 answer

boostrap collapsible navigation bar does not show menu IONIC 3 - overwrite the apps

score 0 · Answer 1

This is an example of how the change can be made, I'll give you an example in case someone has doubts like I had:

en route.rb:

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

and in the navbar.vue view:

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

and to pass with a specific parameter, it is done this way:

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>