Passing URL param into input value in VUE.js

Question

I want to pass an URL parameter into the value of the input:

<input id="para" type=text v-model="recipient">

I have a URL with the param www.website.com?para=test , how can I inject that param on page loaded into the input?

I have done it with Jquery before, but I don't know how to achieve this in VUE. Here is the Jquery code that works:

        <script>
            $(document).ready(function() {
            function getURLParameter(e) {
              return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
            }

            if (getURLParameter("Para") === "") {
              console.log("No URL param value found.");
            } else {
                console.log(getURLParameter("Para"));
              $("#para").value = getURLParameter("Para");
            }
        });
        </script>

Thanks a lot

Are you using Vue Router?

Phil
– Phil

2020-09-23 00:14:33 +00:00
Commented Sep 23, 2020 at 0:14 — Phil
– Phil, Commented Sep 23, 2020 at 0:14
Hi Phil, no, I'm not using Router

Gibson
– Gibson

2020-09-23 09:31:58 +00:00
Commented Sep 23, 2020 at 9:31 — Gibson
– Gibson, Commented Sep 23, 2020 at 9:31

Phil · Accepted Answer · 2020-09-23 00:18:26Z

1

You can parse the query string using URLSearchParams() and then assign the value to your recipient data property

<template>
  <div>
    <input id="para" type="text" v-model="recipient">
  </div>
</template>

<script>
export default {
  data: () => ({ recipient: "" }),
  created () {
    const params = new URLSearchParams(location.search)
    this.recipient = params.get("para")
  }
}
</script>

answered Sep 23, 2020 at 0:18

Phil

166k25 gold badges265 silver badges269 bronze badges

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

3 Comments

Gibson Over a year ago

Hi there Phil, the problem is the input is on a non-vue view, so it's outside the <template></template>

Phil Over a year ago

Doesn't sound like your question has anything to do with Vue

Gibson Over a year ago

Hi Phil, I had already defined recipient so it was giving me error. This works like a charm! Thanks a lot!

Jonathan Akwetey Okine · Accepted Answer · 2020-09-23 00:10:58Z

1

In your created method, you could assign the v-model value to the returned value of the function call. You would first have to create the getURLParameter function in your methods and then call it in the created method. So this way,

created(){
 this.recipient = this.getURLParameter("Para")
}

answered Sep 23, 2020 at 0:10

Jonathan Akwetey Okine

1,3203 gold badges17 silver badges18 bronze badges

Collectives™ on Stack Overflow

Passing URL param into input value in VUE.js

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related