Element: [Bug Report] default-active does not work

Created on 24 Aug 2017 · 14Comments · Source: ElemeFE/element

Element UI version

1.4.2

OS/Browsers version

window10

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/pj71jkyw/

Steps to reproduce

html:

js:
var Main = {
data() {
return {
input: '',
activeIndex:'',
funList:[]
}
},
mounted () {
this.activeIndex='2';
this.funList=[{'id': '1', 'name': '处理中心'}, {'id': '2','name': '我的工作台'}, {'id': '3', 'name': '订单管理'}]
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

这个时候第二个按钮“我的工作台”没有被选中。可能是因为default-active和index都被动态绑定数据，但是不知道怎么解决。

What is Expected?

想要默认选中某一项，这一项可以自己设置，也就是default-active和index都要是动态的值

What is actually happening?

目前default-active没有执行

Source

limingyangit

Most helpful comment

default- 开头的属性都不是响应式的。后面会考虑提供一个方法。

Leopoldthecoder on 27 Aug 2017

❤3

All 14 comments

Translation of this issue:

Element UI version

1.4.2

OS/Browsers version

Window10

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/pj71jkyw/

Steps to reproduce

Html:

Js:

Var Main = {
Data () {

Return {
'input:'',

ActiveIndex:'',
FunList:[]

}
},

Mounted () {
This.activeIndex='2';

This.funList=[{'id':'1','name':' processing center'}, {'id':'2','name':' I work table'}, {'id':'3','name':'}]' order management
}

}
Var Ctor = Vue.extend (Main)

New Ctor ().$mount ('#app')
At this point, the second button "my workbench" is not selected. Probably because both default-active and index are dynamically bound data, but they don't know how to fix it.

What is Expected?

If you want to select an item by default, this item can be set by yourself, that is, default-active and index are dynamic values

What is actually happening?

Currently, default-active has not been implemented

element-bot on 24 Aug 2017

同样的问题，特别是结合vue-router的时候我使用onhashchange监听hash值，想通过其在刷新或者后退的时候改变导航栏的"active item"，该属性无法起作用

taozi926494 on 24 Aug 2017

@taozi926494 那最后怎么解决的？这算是element的bug吗

limingyangit on 24 Aug 2017

@limingyangit 我使用onhashchange来监听前进后退，可以达到高亮效果，但是刷新就不行。我看了之前的issue说default-active不是响应式的，我想了下，刷新的时候我去ajax请求了menu数据的，前进后退应该是没有请求数据但是重新渲染了menu所以前进退后可以，那么应该就是issue说的default-active不是响应式的这个问题了

taozi926494 on 24 Aug 2017

@taozi926494 哦哦，我感觉应该是default-active渲染的时候，立刻去选中对应的index，但是这个时候index还没有被渲染出来，所以等index渲染出来了，default-active 也不再执行了。但是我没想到我这个怎么解决。

limingyangit on 24 Aug 2017

@limingyangit 嗯，应该是这样的。刚刚测试了以下，确实default-active不是响应式的，动态改变他绑定的值的内容，不会高亮对应index的menu-item

taozi926494 on 24 Aug 2017

default- 开头的属性都不是响应式的。后面会考虑提供一个方法。

Leopoldthecoder on 27 Aug 2017

❤3

请问这个问题解决了吗？同样default-index需要通过异步请求后获取，也是不能动态渲染