Vuejs2 滚动到v形扩展面板打开

我正在尝试构建一个用于显示列表的移动小应用程序。 其想法是，当用户在这样的列表中添加一个新项目时，它将打开新面板并向下滚动到这样的新面板

我在$vuetify变量中找到了一个方法，不幸的是v-expansion-panels转换（“打开”）需要一些时间，而且由于滚动条高度的变化，goTo（）不会完全向下滚动

因此，根据我的理解，我需要检测转换的结束（enter/afterEnter hook）。 根据vuetifyjs文档，我希望在我的组件上有一个“transition”属性。（事实并非如此）。但这样的属性只是一个字符串，所以我无法连接到它

我的另一个想法是，以某种方式找到过渡组件并将其挂钩。不幸的是，我很难理解el/vnode，vuejs构建的方式就像vue devtool展示的树一样，我无法获得转换组件。调试（在中）时，就像组件/el/vnode有一个父节点，但不是任何人的子节点

有没有办法做到我想要的

下面是我目前所做工作的jsfiddler：

基本上，这是我在Vue中定义的方法：

  methods: {
    newAlarm: function() {
      const newAlarmPanelIndex =  this.alarms.length - 1;

      this.alarms.push({title: "New line"});
      this.activePanelIndex = newAlarmPanelIndex;

      // TODO:
      this.$vuetify.goTo(this.$refs.alarmPanels[newAlarmPanelIndex]);
    }
  }

---

首先，您应该手动打开面板，然后使用goTo超时。 这对我来说很有效，只要给我一些时间打开面板就行了

<v-expansion-panels v-model="alarmPanels">
   <v-expansion-panel>
      <div id="example" />
   </v-expansion-panel>
</v-expansion-panels> 


this.alarmPanels.push(0); // Use index of expansion-panel
setTimeout(() => {
    this.$vuetify.goTo(`#${resultId}`);
}, 500);

此.alarmPanels.push（0）；//扩展面板的使用索引
设置超时（（）=>{
这个.vuetify.goTo（`${resultId}`）；
}, 500);

既然扩展面板的“打开”有固定的持续时间，为什么不添加一个setTimeout（），然后向下滚动呢？我是一种程序员，正在寻找一种可以跟踪事件的解决方案，所以我从来没有想过要使用这样简单的解决方案。。。我想我不会找到我期望的解决方案，所以我肯定会使用你的解决方案！谢谢我猜有时候只是评估努力（时间）和结果。如果setTimeout（）方法有任何问题，请密切关注，并对其进行大量测试。如果应该有问题，你可以随时回到事件挂钩后，但最好继续下去，而不是被困在你有一个替代工作版本的东西；至少是我的意见。