Question

我正在使用此vue-next-level-scroll来自 https://www.npmjs.com/package/vue-next-level-scroll。

我希望在渲染组件后立即触发此操作。

在我的vue文件中，我有以下代码

<vue-next-level-scroll ref="myBtn" :target='`#${this.postIdQuery}`'>
   <button @click='iGotCliked()'>Click me!</button>
</vue-next-level-scroll>

在我的vue文件脚本标签中，我具有以下更新的功能来获取按钮的引用并强制其单击。

updated: function () {
    if (this.postIdQuery != null) {
      const elem = this.$refs.myBtn
      elem.click()
    }
  }

在dom中，已经设置了目标的ID。当我单击“单击我！”时，此代码有效按钮。但是，我希望vue单击渲染，以便当用户输入该组件/页面时它将自动滚动到所需的元素。我在这里做什么错了？

Answer 1

您可以将updated（）生命周期挂钩更改为mounted（）。然后尝试它应该可以工作。

Answer 2

使用$refs在DOM中查找元素。从那里开始，它就是普通的JavaScript：

mounted() {
  const button = this.$refs.myBtn.querySelector('button');
  if (button) button.click();
}

<vue-next-level-scroll ref="myBtn" :target='`#${this.postIdQuery}`'>
  <button @click='iGotCliked()'>Click me!</button>
</vue-next-level-scroll>

更新的解决方案：注意postIdQuery的填充（根据评论，这种情况下过早单击装入）：

watch: {
  postIdQuery: {
    handler(val) {
      if (val) this.$nextTick(() => {
        const button = this.$refs.myBtn.querySelector('button');
        if (button) button.click();
      })
    }
  }
}

<vue-next-level-scroll ref="myBtn" :target='`#${this.postIdQuery}`'>
  <button @click='iGotCliked()'>Click me!</button>
</vue-next-level-scroll>

让我们测试一下：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  mounted() {
    const button = this.$refs.myDiv.querySelector('button');
    if (button) button.click();
  },
  methods: {
    whatever() {
      console.log('i got clicked!')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div ref="myDiv">
    <button @click="whatever()">test</button>
  </div>
</div>

注意：通过快速查看库文档，您的一个小错误是触发了对<vue-next-level-scroll>组件的单击，而不是单击其中的元素。

vue-next-level-scroll强制在呈现DOM之后单击。 Vuejs

2 个答案: