Vue - Creating dynamic params - vuejs2

Question

I'm trying to create a search page (my-site.com/search) and need to pass 3 optional dynamic params to this url on click.
The issue is on click something is removing 'search' from the path and taking me to the root path - my-site.com/. I'm having trouble figuring out what's causing it.
paths.js
const tagToParam = {
postname: ':slug',
search: ':term?/:author?/:topic?'
}
const paginateParam = ':page(page\/\\d+)?'
export default {
postsPageWithSearch: (slug) => slug ? `/${slug}/${tagToParam.search}/${paginateParam}` : `/${paginateParam}`,
}
routes.js
import Search from '#/components/Search'
import paths from './paths'
{
path: paths.postsPageWithSearch('search') + '/',
component: Search,
name: 'Search',
meta: { bodyClass: 'search' },
props: route => (Object.assign(route.params, {
term: route.params.term,
author: route.params.author,
topic: route.params.topic,
page: pageFromPath(route.path)
} ))
},
Search.vue
<template>
<main class="site-content">
<div class="container">
<div class="advanced-search">
<form #click.prevent>
<input type="text"
name="searchTerm"
placeholder="Search title..."
tabindex="1"
v-model="searchTerm">
<select v-model="searchAuthor">
<option value="">All</option>
<option
v-for="author in authors"
:value="author.id"
:key="author.id">{{ author.name }}</option>
</select>
<select v-model="searchTopic">
<option value="">All</option>
<option
v-for="topic in topics"
:value="topic.id"
:key="topic.id">{{ topic.name }}</option>
</select>
<button class="button" type="submit" #click="submitSearch()">Search</button>
</form>
</div>
<section v-if="posts">
<post-item
v-for="post in posts"
:key="post.id"
:post="post"
:postmeta=false
/>
</section>
</div>
</main>
</template>
<script>
import PostItem from '#/components/template-parts/PostItem'
export default {
name: 'Search',
components: {
PostItem,
},
props: {
page: {
type: Number,
required: true
},
term: {
type: String,
required: true
},
author: {
required: true
},
topic: {
required: true
},
},
data() {
return {
postsRequest: {
type: 'quote',
params: {
per_page: 5,
search: this.term,
authors: this.author,
tags: this.topic,
page: this.page
},
showLoading: true
},
totalPages: 0,
authorsRequest: {
type: 'authors',
params: {
per_page: 100,
},
},
topicsRequest: {
type: 'tags',
params: {
per_page: 100,
},
},
searchTerm: '',
searchAuthor: '',
searchTopic: ''
}
},
computed: {
authors () {
return this.$store.getters.requestedItems(this.authorsRequest)
},
topics () {
return this.$store.getters.requestedItems(this.topicsRequest)
},
posts() {
return this.$store.getters.requestedItems(this.postsRequest)
}
},
methods: {
getAuthors() {
return this.$store.dispatch('getItems', this.authorsRequest)
},
getTopics() {
return this.$store.dispatch('getItems', this.topicsRequest)
},
getPosts() {
return this.$store.dispatch('getItems', this.postsRequest)
},
setTotalPages() {
this.totalPages = this.$store.getters.totalPages(this.postsRequest)
},
submitSearch() {
this.$router.replace({
name: "Search",
params: {
term: this.searchTerm,
author: this.searchAuthor,
tags: this.searchTopic
}
})
}
},
created() {
this.getAuthors()
this.getTopics()
this.getPosts().then(() => this.setTotalPages())
},
}
</script>

Answer 1

It looks like the <form> element has #click.prevent. Try putting the #click.prevent on your submit button.