vue3,ref响应式数据无法使用js原生filter函数问题？

Question

问题遇到的现象和发生背景

如题!

问题相关代码，请勿粘贴截图

<div v-for="course in courses" class="col-md-3">
  <div v-for="teacher in teachers.filter(t=>{return t.id===course.teacherId})" class="profile-activity clearfix">
          <div>
                <img v-show="!teacher.image" class="pull-left"  src="/assets/images/avatars/avatar5.png">
                 <img v-show="teacher.image" class="pull-left" v-bind:src="teacher.image">
                   <a class="user" href="#"> {{teacher.name || '暂无名称'}} </a>
                   <br>
                   {{teacher.position || '暂无职位'}}
             </div>
      </div>
</div>

<script>
setup() {
  const courses = ref();
  let teachers=ref();

const allCourse = () => {
                axios.get("/course/all").then((response) => {
                    const data=response.data;
                    if (data.success){
                        courses .value = data.content;
                    }else {
                        Toast.warning(data.message);
                    }

                })
            };

const allTeacher = () => {
                axios.get("/teacher/all").then((response) => {
                    const data=response.data;
                    if (data.success){
                        teachers.value = data.content;
                    }else {
                        Toast.warning(data.message);
                    }

                })
            };

onMounted(() => {
                allCourse();
                allTeacher();
            });

  return{
    courses,
    teachers
  }
</script>

运行结果及报错内容

我想要达到的结果

从teachers数组中过滤出符合条件的teacher对象放在页面中。

Answer 1

用 computed 去进行过滤
直接去遍历computed 不要再模板上直接写过滤函数 这种行为不太规范
再有你的teachers ref() 是一个undefined 改成 teachers ref([])

vue3的computed用法

Vue3中computed的使用_lannieZ的博客-CSDN博客_vue3使用computed 第一种写法<template> <div> <p><input type="text" v-model="age"></p> <p><input type="text" v-model="nextAge"></p> </div></template><script>import { computed, ref } from 'vue'exp https://blog.csdn.net/lannieZ/article/details/110233054