-
-
Notifications
You must be signed in to change notification settings - Fork 704
Description
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