时间戳

首页 > 解决方案 > 如何通过单击Vue中的另一个div（按钮）来显示隐藏的div？

vue.js - 如何通过单击Vue中的另一个div（按钮）来显示隐藏的div？

问题描述

我试图显示在单击确认按钮后通常隐藏的加载 div，即使在单击时更改了隐藏值也是如此。

这是我的代码：

<div class="form-btns">
  <button type="button" class="btns full-width" v-on:click="submitPhoneNumber(); isHidden = false">
   {{t('confirmNumber')}}
  </button>

  <loader title="" v-if="!isHidden"></loader>

  <button type="button" class="btns hyperlink">
   {{t('accountRecovery')}}
  </button>

</div>


data() {
    return {
      isHidden: true,
    };

标签： vue.jsvuejs3

解决方案

您应该更改isHidden内部的值submitPhoneNumber，如下所示，或者使用您在第一个调用中调用的专用函数。

let app = new Vue({
  el: '#app',
  data: {
    isHidden: true
  },
  methods: {
    submitPhoneNumber() {
      this.isHidden = false;
      
      // Simulate an API response after 3s to hide the loader
      setTimeout(() => { this.isHidden = true; }, 3000);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <button type="button" @click="submitPhoneNumber()">
   Submit button
  </button>

  <p v-if="!isHidden">Loading...</p>

</div>

推荐阅读