vue 過濾器的使用（解決forEach遇到的問題）

在學習過程中遇到了一個問題，本來我是想用forEach來解決的，但是一直報錯

 

 

<template>
    <div class="m-menu">
      <dl class="nav">
        <dt>全部分類</dt>
        <dd v-for="item in menu" @mouseenter="ddEnter" :datatype="item.type">
          <span class="arrow" >{{ item.name}}</span>
        </dd>
      </dl>
      <div class="detail" v-if="kind">  //kind初始化為空，鼠標移入分類一節菜單的時候，賦值並展示
        <template  v-for="item in curDetail.child">
          <h4>{{ item.title }}</h4>
          <span v-for="spanItem in item.child">{{ spanItem }}</span>
        </template>
      </div>
    </div>
</template>

<script>
    export default {
        name: "menuLeft",
        data(){
        return {
          kind:'',
          menu:[
            {
              type:'food',
              name:'美食',
              child:[{
                title:'美食',
                child:['代金券','甜點飲品','火鍋','自助餐','小吃快餐']
              }]
            },
            {
              type:'takeout',
              name:'外賣',
              child:[{
                title:'外賣',
                child:['美團外賣']
              }]
            },
            {
              type:'hotel',
              name:'酒店',
              child:[{
                title:'酒店星級',
                child:['經濟型','舒適/三星','高檔/四星','豪華/五星']
              }]
            }
          ]
        }
      },
      computed:{
        curDetail:function () {

　　　　　　//重要的問題在這里，最初我想通過forEach來拿到對應的數據，結果是數據拿到了，但是報錯，就是我截圖的那個錯誤，后來換了過濾器來解決就沒有問題，
　　　　　　查了很多資料也沒有找到到底是什么原因造成的，初步感覺應該是執行效率的問題，但是找資料沒有查到關於執行效率的資料
　　　　　
          return this.menu.filter(item => item.type===this.kind)[0];    

          // this.menu.forEach((item)=>{
          //   if(item.type ==this.kind){
          //     return item   //問題已找到，forEach方法無法返回數據造成的
          //   }
          // })
        }
      },
      methods:{
        ddEnter(e){
          this.kind = e.target.getAttribute('datatype'); //鼠標移入取到當前對象的datatype屬性賦值給kind，在跟去kind去和menu中的數據進行匹配，來顯示相對應的數據。
        }
      }
    }
</script>

<style scoped>

</style>


最終效果圖