How can I pass properties to a component which is called by router in Vue Js

Question

I am new to VueJs and I have a problem with two components. I am trying to display a component with vuejs router and I must pass properties to that component and since it's not a child of that component (it's in different directory), how can I pass data to that component? For example:

This is a Parent component:

 <template>
    <div class="container">
       <router-link to="/Form"></router-link>
    </div>
</template> 
<script>
  export default{
  data(){
    return{
      values: {val1: 123, val2: 321}
    }
  }
}
</script>

This is a components that needs properties, Form component:

 <template>
    <div class="container">
       <form>
         <input type="text" v-model="values.val1"/>
         <input type="number" v-model="values.val2"/>
       </form>
    </div>
</template> 
<script>
  export default{
  props: {
    values: {
      type: Object
    }
  }
}
</script>

Where is the router-view?

Bert
– Bert

2017-09-11 20:08:12 +00:00
Commented Sep 11, 2017 at 20:08 — Bert
– Bert, Commented Sep 11, 2017 at 20:08
It's in App.vue.

Bernard Doci
– Bernard Doci

2017-09-11 20:17:20 +00:00
Commented Sep 11, 2017 at 20:17 — Bernard Doci
– Bernard Doci, Commented Sep 11, 2017 at 20:17

thanksd · Accepted Answer · 2017-09-11 20:19:34Z

1

You could pass the values as the query object:

<router-link :to="{ path: '/Form', query: values }"></router-link>

And have the Form component check for the $route.query values instead of using props:

<template>
  <div class="container">
    <form>
      <input type="text" v-model="values.val1"/>
      <input type="number" v-model="values.val2"/>
    </form>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      values: this.$route.query
    }
  }        
}
</script>

Note that these values will be added to the URL as a query string.

Otherwise, I'd take a look at this post. Or maybe look into Vuex.

edited Sep 11, 2017 at 20:19

answered Sep 11, 2017 at 20:14

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I pass properties to a component which is called by router in Vue Js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related