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

by

0👍

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

Leave a comment