Vue3中基于文本输入框的computed列表筛选功能失效问题排查

1. 核心变量名不匹配 #

你定义的数组是packedItemsArray，但在addItem、filteredvalues、deleteItem里全用了未声明的unpackedItemsArray——这个错误会直接导致数组相关逻辑全部失效，也是筛选功能异常的根源之一。

修复：统一变量名，比如都用unpackedItemsArray，并确保提前声明：

// 修正变量声明与使用
const unpackedItemsArray = ref([]);

function addItem (item) {
   unpackedItemsArray.value.push(item);
   // 可选：添加后清空输入框，提升体验
   item.value = '';
};

2. Computed属性未返回筛选结果 #

你的filteredvalues中，else分支调用filter后没有返回值——filter方法会生成新数组，但你没把这个结果return出去，导致筛选时页面无内容。

修复：补充return语句，同时建议用includes代替==，支持部分匹配，更符合筛选逻辑：

const filteredvalues = computed(() => {
 if (!filterText.value.length) {
     return unpackedItemsArray.value
   } else {
     // 返回筛选后的数组
     return unpackedItemsArray.value.filter(val => val.includes(filterText.value))
   }   
})

3. 删除函数逻辑错误 #

• 函数里用了未定义的变量it，应该使用传入的待删除项
• filter不会修改原数组，需要将原数组替换为筛选后的结果，而非仅return

修复：

const deleteItem = (itemToDelete) => {
   unpackedItemsArray.value = unpackedItemsArray.value.filter(val => val !== itemToDelete)
}

同时修正模板中的调用，传入当前项：

<li v-for="fitem in filteredvalues" :key="fitem">
    <button @click="deleteItem(fitem)">Delete item</button>
    {{ fitem }}
</li>

4. 添加函数的参数问题 #

调用addItem(item)时，item是ref对象，直接push会把整个对象存入数组，而非输入的文本值。

修复：传入ref的value值：

<form @submit.prevent="addItem(item.value)">

关于filterText.value返回undefined的说明 #

修复上述变量名错误后，filterText.value不会再是undefined——你已经正确声明了const filterText = ref('')且v-model绑定正常。之前的undefined大概率是因为unpackedItemsArray未声明导致代码报错，阻断了后续逻辑，并非filterText本身的问题。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo