How to pass a vue data value or id from a href link to load new component to show this value or id?

Question

I have one vue componet i wanna click to a href link bellow code to load another vue componet to pass id or any value of this form.

<template>
    <div class="container"> 
        <table class="table table-hover">
           <tbody>
                <tr>
                    <th>No</th>
                    <th>another vue component</th> 
              </tr>
                <tr> 
                    <td>1 </td> 
                    <td>
                        <a  href="'/NewVueComponent.vue/ + this.form.id'"  > show </a> 
                    </td>
                </tr> 
          </tbody>
        </table>
     </div>  
</template> 
<script>
    export default {
        data (){
            return { 
                form: new Form({ 
                        id: '',
                    })
            }
         } 
    }
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Do you want to add the NewVueComponent into the current component or change the whole view to the new component? — Alex Berger, Feb 11 '21 at 08:11
I want to pass data from my current component to the new component with a link — liaqat ali, Feb 11 '21 at 08:48

gsmig · Answer 1 · 2021-02-11T09:16:20.763

In your view component, have a method that will push router to another view. The id can be passed as an arg via params.

<script>
export default: {
  data() {
    return {
      id: "someId"
    }
  },
  methods: {
    goTo() {
      this.$router.push({name: OtherComponent, params: {
        id: this.id
      }})
    }
  }
}
</script>

and on your route declaration, make sure props is set to true

{
  path: "/path-to-component",
  component: OtherComponent,
  name: "OtherComponent",
  props: true, 
}

and of course on the OtherComponent you will have to define id as a prop.

You can read more about it here https://router.vuejs.org/guide/essentials/passing-props.html

How to pass a vue data value or id from a href link to load new component to show this value or id?

1 Answers1