How to generate URL with form for vue-router?

Question

I am trying to create search bar(form), but I need it to have pretty URL but I am using Vue-router so my app.js looks like this

let Search = Vue.component('search', require('./components/Search.vue'));
const routes = [
    { path: '/protocols/:param', component: Search },
]

now functionally when I type /protocols/test I get my desired results, but I am not sure how to create a form so when I type something to redirect me to that route /protocols/:param since my page is vue component

<form action="/protocols/?what goes here?">
    <input type="text" placeholder="Search..." class="" name="" id="search">
</form>

since all tutorials are made for search on the same page, but I need to dedicate one for results

samayo · Accepted Answer · 2017-11-28 09:54:12Z

2

You can use v-model to assign the input value to your data and use a computed property to generate the URL action like this:

<form :action="urlAction">
    <input type="text" placeholder="Search..." class="" name="" id="search" v-model='search'>
</form>

Now use data and computed props to build the dynamic URL

data () {
  return {
    search: ''
  }
},

computed: {
  urlAction () {
    return "/protocols/" + this.search
   }
}

answered Nov 28, 2017 at 9:54

samayo

16.5k13 gold badges95 silver badges115 bronze badges

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

Collectives™ on Stack Overflow

How to generate URL with form for vue-router?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related