我有一个超级简单的vue 3应用程序，它的工作原理有点像一个待办事项应用程序，你添加一个项目，它会推到一个数组中，显示在屏幕上。我用一个v-model="”设置了一个〈input/ type=“text”，并在该数组上进行了计算。逻辑非常简单，它有一个.filter和一个条件，条件返回匹配大小写，如果输入为空，则返回原始Array。

<template>
   <div class="container">
       <form @submit.prevent="addItem(item)">
           <div class="form__first-row">
               <label for="item">
                   <input type="text" v-model="item" id="item" placeholder="New Item" required>
               </label>
               {{ item }}
               <button :disabled="!item.length" type="submit">Add Item</button>
           </div>
       </form>
       <div class="filter-container">
           <label for="filter-items">
               <input type="text" id="filter-items" placeholder="Filter Items" required class="filter-input" v-model="filterText">
           </label>
       </div>
       {{ filterText }}
       
       <h2>Items List</h2>
       <div class="list-container">
       <div class="unpackedlist-container">
            <b>
                <p>Unpacked</p>
            </b>
           <ul>
               <li v-for="fitem in filteredvalues" :key="fitem">
                   <button @click="deleteItem(item)">Delete item</button>
                   {{ fitem }}
               </li>
           </ul>
       </div>
   </div>
   </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const item = ref('');
const packedItemsArray = ref([]);

function addItem (item) {
   unpackedItemsArray.value.push(item);
};

const filterText = ref('')

const filteredvalues = computed(() => {
 if (!filterText.value.length) {
     return unpackedItemsArray.value
   } else {
     unpackedItemsArray.value.filter( val => val == filterText.value)
 }   
})

const deleteItem = () => {
   return unpackedItemsArray.value.filter((val) => val != it )
}
</script>

我观察到的奇怪的事情是，calculated中filterText.value的console.log（）返回了一个未定义的值，这是问题吗？异步问题？
任何建议都是高度赞赏！谢谢在advence！