vuejs2 - Vue - 使用 v-model 和 vuex

Question

我正在构建一个搜索页面，并且在使用 v-model 和 vuex 存储更新我的计算属性时遇到了困难。我正在使用这个基于 Vue 构建的wordpress 主题

在我的数据中，我有一个主要的帖子请求，它使用 3 个参数从 wordpress rest api 获取数据，我希望能够使用 v-model 设置这些参数并相应地获取帖子。

postsRequest: {
  type: 'quote',
  params: {
    per_page: 50,
    search: null,
    authors: null,
    tags: null
 },
 showLoading: true
},

然后我正在获取作者和标签列表，以便能够获取我需要在 postsRequest 参数中使用的 id。

authorsRequest: {
   type: 'authors',
   params: {
     cq_per_page: 500,
   },
},
topicsRequest: {
  type: 'tags',
  params: {
    per_page: 100,
  },
},

以下是我的计算属性和方法

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)
        },
    },
    created() {
        this.getAuthors()
        this.getTopics()
        this.getPosts()
    },

我尝试在所有三个 v-model 属性上设置手表。查看 vue 开发人员工具，手表确实更改了 v-model 更改的 postsRequest.params，但帖子保持不变。

watch: {
        "searchAuthor": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = this.searchAuthor
            this.postsRequest.params.tags = null
            this.getPosts()
        },
        "searchTopic": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = this.searchTopic
            this.getPosts()
        },
        "searchTerm": function() {
            this.postsRequest.params.search = this.searchTerm
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = null
            this.getPosts()
        }
    },

模板

<div class="advanced-search">
    <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>
</div>

<section v-if="posts">
   <post-item
      v-for="post in posts"
      :key="post.id"
      :post="post"
      :postmeta=false
   />
</section>

我正在学习，非常感谢任何帮助。

编辑（完整的组件代码）

<template>
  <main class="site-content">
    <div class="container">
        <div class="advanced-search">
            <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>

        </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: {
        term: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            postsRequest: {
                type: 'quote',
                params: {
                    per_page: 50,
                    search: null,
                    authors: null,
                    tags: null
                },
                showLoading: true
            },
            authorsRequest: {
                type: 'authors',
                params: {
                    cq_per_page: 500,
                },

            },
            topicsRequest: {
                type: 'tags',
                params: {
                    per_page: 100,
                },
            },
            searchTerm: '',
            searchAuthor: '',
            searchTopic: ''
        }
    },
    watch: {
        "searchAuthor": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = this.searchAuthor
            this.postsRequest.params.tags = null
            this.getPosts()
        },
        "searchTopic": function() {
            this.postsRequest.params.search = null
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = this.searchTopic
            this.getPosts()
        },
        "searchTerm": function() {
            this.postsRequest.params.search = this.searchTerm
            this.postsRequest.params.authors = null
            this.postsRequest.params.tags = null
            this.getPosts()
        }
    },
    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)
        },
    },
    created() {
        this.getAuthors()
        this.getTopics()
        this.getPosts()
    },
}
</script>

标签： vuejs2