'Watch' not working with 'getItems' action?

[shubhra14]

Hi, I am trying to set up a search page and am trying to use v-model in a custom component, however, watching the v-model property is not updating 'getItems'. I see the changes getting reflected in the vue development tools in the postsRequest.params but i'm unable to fetch the updated items and the posts computed property remains unchanged.

I asked this question on stackoverflow and and a user has commented this:

you are watching searchAuthor so when it changes you are mutating the postsRequest object then calling the store action getItems (also the syntax is correct but i'm not sure what exactly it does... if you don't see the data change then it is the reason) so you need to understand what this API is doing to your store after you give it the data objects.

I'd appreciate if you could point me in the right direction.

My code:

<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"
            />
        </section>
    </div>
  </main>
</template>

<script>
import PostItem from '@/components/template-parts/PostItem'

export default {
    name: 'Search',
    components: {
        PostItem,
    },
    data() {
        return {
            postsRequest: {
                type: 'quote',
                params: {
                    per_page: 5,
                    search: null,
                    authors: null,
                    tags: null
                },
                showLoading: true
            },
            authorsRequest: {
                type: 'authors',
                params: {
                    per_page: 100,
                },

            },
            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>

[Abassion]

So , like we said on StackOverflow ... the v-model is working fine ... the problem lives inside your store actions ... you should change the question title and include your API tag (I'll try to solve this issue too)

[shubhra14]

Hi, sorry to trouble you again. A lot of my components would require a search feature. Any advice you can give on how to make "watch" work with this. Thank you.