Vuejs 条件渲染 v-if

【问题标题】：Vuejs conditional rendering v-ifVuejs 条件渲染 v-if
【发布时间】：2020-08-22 13:57:43
【问题描述】：

我有这部分代码，在我看来，如果我想显示它有一个条件

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

在我的 javascript 代码中，我触发 toShow 为 true

this.toShow = true

this.$refs.target // always null

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

我需要一个我不想使用setTimeout() 的解决方案，因为我每次都在切换toShow 进行转换，所以我的代码中有很多嵌套的setTimeout()。

【问题讨论】：

您能解释一下您将使用this.$refs.target 做什么吗？可能有一种方法可以绕过它，这样您就不需要使用它。唯一的其他选择是使用v-show，它包含元素但隐藏它。

标签： vue.js

【解决方案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>

【讨论】：

不错的解决方案，但与 setTimeout 的概念相同