vue 计算属性 computed

Question

html: 
<div v-for="(item, index) in navBar" :key="index" :style="{color: item.color}">
    <i :class="item.icon"></i><span :style="{color: item.color}">{{item.name}}</span>
</div>

js: 
navBar: [
    {
        icon: 'iconfont iconshouye',
        name: '首页'
    },
    {
        icon: 'iconfont icondianping',
        name: '附近'
    },
    {
        icon: 'iconfont icongerenzhongxin',
        name: '我的'
    }
]

color () {
    this.navBar.map(n => {
        if (n.name === this.$route.meta.title) {
            return n.color = '#75df9f'
        }
    })
}

• navBar是导航,color是当导航名称和this.$route.meta.title相等是,添加颜色
• 但是color一直是undefined,
• 计算属性用的不熟, 请教一下,这里怎么把该颜色return出去

Answer 1

1、没看到你哪里用到了计算属性 computed
2、vue在初始化的时候会监听navBar，这时候子元素中是没有color属性的，所以color不会被监听，所以你后面修改不会触发页面更新，你可以使用vue的set来设置color，或者为navBar中的元素添加color属性，哪怕为空。
3、你这里只有设置颜色，并没有取消颜色，所以后面切换几次路由，导航的颜色都是一样的了，应该写成

this.$set(n, 'color', n.name === this.$route.meta.title ? '#75df9f' : '')

4、一般的设置激活样式，优雅的做法是配合class，而不是直接使用style

<div v-for="(item, index) in navBar" :key="index" :class="{active: item.name === $route.meta.title}">
    <i :class="item.icon"></i><span>{{item.name}}</span>
</div>
//下面可以使用watch 或 computed监听$route