Skip to content

ContentList not reacting to changes in computed query #1660

@james-tyner

Description

@james-tyner

Environment

  • Operating System: Darwin
  • Node Version: v18.9.0
  • Nuxt Version: 3.0.0-rc.13
  • Nitro Version: 0.6.1
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: target, app, css, modules, content, image
  • Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
  • Build Modules: -

Reproduction

<template>
    <div>
        <div>
            <div>
                <div class="button" v-on:click="toggleFilter(null)">
                    All
                </div>

                <div class="button" v-on:click="toggleFilter('design')">
                    Design
                </div>

                <div class="button" v-on:click="toggleFilter('dev')">
                    Development
                </div>
            </div>

            <div id="projects-list">
                <ContentList :query="projectsQuery" v-slot="{ list }">
                    <nuxt-link :to="project.ref" v-for="project in list" :key="project.index">
                        <p class="project-name">{{project.title}}</p>
                        <small class="project-year">{{project.year}}</small>
                    </nuxt-link>
                </ContentList>
            </div>

        </div>
    </div>
</template>

<script>
  export default {
    data:function(){
      return {
        filter:null
      }
    },
    computed:{
      projectsQuery:function(){
        // sorts list of projects by year descending, title A-Z
        let baseQuery = { path: "/projects", sort: { title: 1, year: -1 } };

        if (this.filter != null){

          baseQuery = {
            ...baseQuery,
            where: {
              types: {
                $contains: this.filter
              }
            }
          }
        }

        return baseQuery;
      }
    },
    methods:{
      toggleFilter:function(type){
        this.filter = type;
      }
    }
  }
</script>

Describe the bug

I am using a <ContentList> to render a list of items from one of my content folders.

I would like the user of the site to be able to filter the list using buttons. Each button corresponds to a category, and each item in the content folder has multiple categories described in its frontmatter like this:

ref: example
title: Example project
types:
  - design
  - dev
year: 2021

I'm using the query prop on the ContentList to filter based on categories. I have created it as a computed property, as you can see in the Reproduction above.

The query does work when I specify it directly in the computed property before rendering the page, but it does not work when the query is set in response to the user clicking on a filter button. What I see instead is the list with the baseQuery I specified in my Reproduction above applied. The list does not change as the where parameter is added to it.

I have verified that the projectsQuery computed property is changing in response to the user input. It's just the content list that's not changing.

Am I doing something wrong? Is this an expected behavior? Or is this a bug?

Additional context

No response

Logs

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions