vue3保存的时候如何遍历所有prop包含某个字眼的元素

在Vue3中，当你需要在组件状态改变时遍历所有包含特定关键字的prop时，你可以利用`watch`或`computed`属性结合数组的`filter()`方法来实现这个功能。假设你的组件有一个名为`propsData`的对象数组，每个对象都有一个`key`属性。

<template>
  <div>
    <ul ref="list">
      <li v-for="(item, index) in filteredItems" :key="index">{{ item.key }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const propsData = ref([{ key: 'apple' }, { key: 'banana'}, { key: 'cherry', containsKeyword: true }]);
// 假设你想查找包含关键词'word'
const keyword = 'word';
const filteredItems = computed(() => {
  return propsData.value.filter(item => (item.containsKeyword || item.key.includes(keyword)));
});
</script>

<style scoped></style>

在这个例子中，我们创建了一个计算属性`filteredItems`，它通过`filter()`方法检查每个对象是否包含`containsKeyword`布尔值为真（这通常是一个标志表明该元素应该匹配），或者是`key`属性中包含给定的关键字`keyword`。然后在模板中，只渲染包含这个关键字的元素。

如果你的数据结构不是这样的，你可能需要调整过滤条件或数据结构以适应你的需求。