Vue.js中如何在confirm弹窗弹出前显示指定HTML内容？

嘿，这个问题我之前也踩过坑！咱们先搞清楚为啥原来的代码不生效：

Vue的DOM更新是异步的——当你把userIsDeciding设为true时，Vue不会立刻去修改页面DOM，而是把这个更新任务放进一个异步队列里。但confirm()是同步方法，它会立刻阻塞浏览器的主线程，这时候DOM还没来得及渲染那个黄色的<p>标签，所以你看不到它就直接弹出确认框了。

那怎么解决呢？我们需要等Vue完成DOM更新后，再弹出确认框。Vue给我们提供了$nextTick方法，它的作用就是在DOM更新完成后执行指定的回调函数，完美适配这个场景！

修改后的代码如下：

new Vue({
  el: "#vueexample",
  data: { userIsDeciding: false },
  methods: {
    colorFunction: function () {
      this.userIsDeciding = true;
      
      // 用$nextTick等待DOM更新完成后再弹出确认框
      this.$nextTick(() => {
        if (confirm("please confirm")) {
          // 这里放你需要执行的逻辑
          console.log("用户确认了操作");
        }
        this.userIsDeciding = false;
      });
    },
  },
});

对应的HTML部分保持不变：

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js'></script>

<div id="vueexample">
  <button @click="colorFunction()">Click me!</button>
  <p v-if="userIsDeciding" style="background-color: yellow">
    The user has to decide.
  </p>
</div>

这样修改后，点击按钮时，Vue会先更新DOM显示黄色提示文本，然后再弹出确认框，就能达到你想要的效果啦～

备注：内容来源于stack exchange，提问作者jaheraho