Question

我正在尝试创建搜索页面（my-site.com/search），并且需要在点击时向此网址传递3个可选的动态参数。

问题在于单击时，某些东西从路径中删除了“ search”并带我到根路径-my-site.com/。我在弄清楚是什么原因时遇到了麻烦。

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

看起来<form>元素具有@ click.prevent。尝试将@click.prevent放在提交按钮上。

Vue-创建动态参数

1 个答案: