vue 导航点击切换图片

<template>
  <div class="navbar">
    <div>
          <p v-for="(item, index) in menu" @click="goto(item,index)" :key="index" :class="item.nowImg?'actived':''">
          <img :src="item.nowImg?item.activeIcon:item.navIcon" class="navIcon"/>
          {{item.text}}
          </p>
      </div>
  </div>
</template>


<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'
export default {
    data() {
      return {
         menuIndex : this.$route.matched[1].path,
         menu :[
            {
            path : '/account/accountIndex', 
            text : '我的账户',
            navIcon:'../../../static/nav1.png',
            activeIcon:'../../../static/activeNav1.png',
            matched : '/account',
            nowImg:true
            },
            {
            path : '/authenticate/authenticateIndex', 
            text : '信用认证', 
            navIcon:'../../../static/nav2.png',
            activeIcon:'../../../static/activeNav2.png',
            matched : '/authenticate',
            nowImg:false
            },
            {
            path : '/bankcardmanage/bankcardmanageIndex', 
            text : '借款记录', 
            navIcon:'../../../static/nav3.png',
            activeIcon:'../../../static/activeNav3.png',
            matched : '/bankcardmanage',
            nowImg:false
            },
            {
            path : '/bankCard/bankCardIndex', 
            text : '银行卡管理', 
            navIcon:'../../../static/nav4.png',
            activeIcon:'../../../static/activeNav4.png',
            matched : '/bankCard',
            nowImg:false
            },
         ]
      };
    },


    created: function () {
      
    },


    methods: {
      actived(route){
        this.menuIndex = route;
      },
      goto(i,ind){
      this.menu.map(i=>{
      i.nowImg=false
      return {...i}
      })
      this.$router.push(i.path)
      this.menu[ind].nowImg = true
     
      }
    },
    mounted(){
      
    },
}


</script>
<style>
*{ margin:0; padding:0; box-sizing: border-box;}
.cl::after,.cl::before{content: ".";line-height: 0; height: 0; display: block; visibility: hidden; clear: both;}
.w1200{
width: 1200px;
margin: 0 auto;
height: auto;
}
.navbar {
    display: block;
    width: 240px;
    background-color: #fff;
    height: 760px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}
.navbar > div {
   padding-top: 20px;
}
.navbar > div p {
  margin:5px 0;
  padding:15px 20px;
  color: #000;
  display: block;
  text-decoration: none;
}
.navIcon{
float: left;
display:block;
width:18px;
height: 20px;
margin-top:-2px;
margin-right:14px;
}


.navbar > div p.actived{
  background-color: #85b6f8;
  color: #fff;
}
.navbar > div p:hover{
cursor: pointer;
}


</style>