Question

我有这部分代码，在我看来，是否要显示它有一个条件

<div v-if="toShow" ref="target"></div>

并且在我的JavaScript代码中，我触发了toShow为真

this.toShow = true

this.$refs.target // always null

但是当我使用setTimeout()时，该值不为空

我需要一个我不想使用setTimeout()的解决方案，因为每次转换时我都会切换toShow，所以发生的事情是我的代码中有很多嵌套的setTimeout()

Answer 1

您可以使用$nextTick，直到下一个DOM更新周期。它应该比setTimeout好得多，因为它是在DOM更新之后而不是在特定时间之后被快速调用的。

我在下面创建了一个小提琴，以显示其工作原理。

new Vue({
  el: "#app",
  data: () => {
    return {
      show: false
    };
  },
  methods: {

    toggleShow() {
      this.show = !this.show;
      console.log(this.$refs.target);

      this.$nextTick(() => {
        console.log(this.$refs.target);
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggleShow">Toggle Show</button>

  <div v-if="show">
    <h5>Showing</h5>
    <div ref="target"></div>
  </div>
</div>

Vue.js条件渲染v-if

1 个答案: