Question

我试图显示通常在单击确认按钮后隐藏的加载 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,
    };

Answer 1

你的代码有点奇怪。摆脱您尝试直接在模板 HTML 中设置值的方式，并在 methods 的函数中设置它。所以你的新代码是：

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

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

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

</div>

然后在您的 methods 中像这样切换值：

data() {
  return {
    isHidden: true,
  }
},
methods: {
  submitPhoneNumber() {
    this.isHidden = false; // I would probably rename this to isLoading and invert the logic
    // Other stuff...
  }
}

Answer 2

您应该更改 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>

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

2 个答案: