菜单栏Menu匪夷所思的bug

<template>
  <div class="">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-menu-item index="2">立刻滚蛋</el-menu-item>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="4">订单管理</el-menu-item>
    </el-menu>

    <el-button @click="btn">切换状态为：处理中心</el-button>
  </div>
</template>

<script>
export default {
  name: "",
  created() {},
  mounted() {},
  data() {
    return {
      activeIndex: "1",
    };
  },
  computed: {},
  methods: {
    btn() {
      this.activeIndex = "1";
    //    this.activeIndex = 1
      console.log(" this.activeIndex", this.activeIndex);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss"  scoped>
</style>

切换标签 这个default-active 所绑定的值 并不是index 起着默认高亮的作用

问题： element-ui中的el-menu选中项高亮:default-active属性不生效解决方法

设置为字符串的时候 没有跳回到 处理中心

this.activeIndex = “1”

设置为数字 1 的时候 回到处理中心

this.activeIndex = 1

但是报错了：

怎么解决？？？

试了.$forceUpdate$nextTick 不可行

      // this.$forceUpdate();
      
      
     // this.$nextTick(() => {
     //   this.activeIndex = "1";
     // });
     // console.log(" this.activeIndex", this.activeIndex);
     // console.log(typeof this.activeIndex);

没错就是加ref

  this.$refs.Menu.activeIndex = "1";

参考：www.jianshu.com/p/25b4162a9…