how to get param from url and display it in vue

Question

I have an url: http://localhost:8080/Currency?currency=RMB I want to get the currency param which is RMB

In:

created(){
    this.currencyParam = this.$route.query.currency;
    console.log(curr: ${this.currencyParam});
}

and I can get the curr: RMB in F12 - console but in F12 -Vue I get currency:undefined

In my template:

<template v-else>
          <gateway
            :currency="this.$route.query.currency"
          />
</template>

I get an error:

Error in render: "TypeError: Cannot read property '$route' of undefined found in and in F12 -Vue I still get currency:undefined

Some insight into reactivity stackoverflow.com/questions/57615156/… — Estradiaz
– Estradiaz, Commented Aug 27, 2019 at 5:38
The template parser got designed this way - as an example on v-on stackoverflow.com/questions/57524110/… — Estradiaz
– Estradiaz, Commented Aug 27, 2019 at 5:39
@Estradiaz can you help me with this pls?stackoverflow.com/questions/57676629/… — user11135747
– user11135747, Commented Aug 27, 2019 at 14:47

onuriltan · Accepted Answer · 2019-08-27 06:20:55Z

0

You can add a watch property that will allow you to listen changes in query param

data () {
  return {
   currencyParam = null
  }
},
watch: {
    '$route.query.currency': function () {
       if(this.$route && this.$route.query.currency) { // if not undefined
            console.log(`curr: ${this.$route.query.currency}`);
            this.currencyParam = this.$route.query.currency;
       }
    }
  }

Also change your template like this;

<template>
   <gateway v-if="currencyParam" :currency="currencyParam" />
</template>

answered Aug 27, 2019 at 6:20

onuriltan

3,9385 gold badges28 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

how to get param from url and display it in vue

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