Vue3中动态过滤v-for循环数据源 模板未同步更新问题咨询

问题原因 #

你代码的核心问题是混用Composition API和Options API时，ref值的操作方式错误：

• 从setup函数返回的ref类型变量，挂载到组件实例this上时会自动解包，不需要再加.value后缀
• 你写的this.filteredPosts.value = [...filterPosts]实际是给已经解包的普通数组新增了一个value属性，并没有修改数组本身，自然不会触发视图更新

修复方案 #

方案1：直接修正现有写法的错误 #

只需要修改Home.vue里的searchInputChange方法，去掉.value即可：

methods: {
  searchInputChange(value) {
    const filterPosts = this.allPosts.filter(post => post.title.toLowerCase().includes(value.toLowerCase()));
    // 去掉.value，直接修改filteredPosts
    this.filteredPosts = [...filterPosts]
  }
}

方案2：全用Composition API（更符合Vue3的推荐写法） #

把逻辑全部放到setup里，避免两种API混用的问题，修改后的Home.vue代码如下：

<template>
    <Searchfield @searchInputChange="searchInputChange" />

    <div v-for="post in filteredPosts" :key="post.id">
      {{ post.title }}
    </div>
</template>

<script>
import { ref } from 'vue'
import Searchfield from '../components/Searchfield.vue'

export default {
  name: 'Home',
  components: { Searchfield },
  setup() {
    const filteredPosts = ref([])
    
    const allPosts = [
      {
        "id": 1,
        "title": "Title1",
      },
      {
        "id": 2,
        "title": "Title2",
      }
    ]
  
    filteredPosts.value = [...allPosts]

    // 把搜索方法放到setup内，操作ref时加.value
    const searchInputChange = (value) => {
      const filterPosts = allPosts.filter(post => post.title.toLowerCase().includes(value.toLowerCase()));
      filteredPosts.value = [...filterPosts]
    }

    return { allPosts, filteredPosts, searchInputChange }
  }
}
</script>

额外优化建议 #

你当前用的是input的change事件，只有在输入框失焦的时候才会触发，如果想要输入实时触发搜索，可以把Searchfield.vue里的@change改成@input：

<input type="text" @input="searchInputChange" placeholder="Search...">

内容的提问来源于stack exchange，提问作者robtot