Vue.js如何替换点击按钮的文本

Question

我的应用程序 UI 我有一个表，其中列出了一组权限。 在每一行中都有一个切换按钮，用于将数据库中每个权限的默认状态设置为“拒绝”或“授予”。

如果用户单击按钮，则会在后台触发异步操作。 这一切都很好，但我想添加的是，当用户单击按钮时，其内部 html 更改为微调器或某种“等待...”文本，并且按钮在操作运行时被禁用。 这是为了防止用户单击多次，因为该操作需要更长的时间才能完成，给人的印象是什么都没有发生。

现在，我知道如何在 jQuery 甚至普通 JS 中做到这一点，但我不知道如何访问 VUE.js 中的按钮属性

我的按钮如下所示：

<button @click="defaultPermissionState(perm.id,'grant',$event)">Deny</button>

我最近才开始接触 vue.js，所以还在学习它；）

更新：我实际上已经设法通过探索 $event 并能够通过这样做来更改文本和按钮属性来找到一种方法：

event.path[0].innerHTML = 'wait...';
event.path[0].disabled = true;

但这看起来不是一个非常优雅的解决方案，所以如果有人知道更好的东西，我仍然想听听

Answer 1

您可以将v-if与:disabled一起使用。 检查这个简单的例子：

 new Vue({ el: "#app", data: { isLoadingArray: [] }, methods: { clicked(index) { this.$set(this.isLoadingArray, index, true) setTimeout(() => { this.$set(this.isLoadingArray, index, false) }, 2000) } } })

 .lds-dual-ring { display: inline-block; width: 64px; height: 64px; } .lds-dual-ring:after { content: " "; display: block; width: 46px; height: 46px; margin: 1px; border-radius: 50%; border: 5px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="clicked(0)" :disabled="isLoadingArray[0]"> <div v-if="isLoadingArray[0]" class="lds-dual-ring"></div> <span v-else>click me</span> </button> <button type="button" @click="clicked(1)" :disabled="isLoadingArray[1]"> <div v-if="isLoadingArray[1]" class="lds-dual-ring"></div> <span v-else>click me</span> </button> <button type="button" @click="clicked(2)" :disabled="isLoadingArray[2]"> <div v-if="isLoadingArray[2]" class="lds-dual-ring"></div> <span v-else>click me</span> </button> </div>

Answer 2

你可以这样做

data: function() {
   return {
     waiting: false,
     ...otherstuffs
   }
},
methods: {
   callAsync() {
      this.waiting = true;
      callASYNC()
      .then((result) => {
         this.waiting = false;
      })
   }
}

在您的 HTML 中

 <button :disabled="waiting"> {{ waiting ? 'Waiting ...' : 'Deny' }} </button>

所以基本上，只需在您点击请求之前设置一个标志，并在调用完成时将其设置回来。 使用此标志将按钮值设置为您想要的任何值

Answer 3

这应该有帮助

<template>
   <button disabled={{disableBtn}} 
     @click="defaultPermissionState(perm.id,'grant',$event)">{{btnText}} 
   </button>
</template>

export default {
   data() {
      return {
         btnText: 'Deny',
         disableBtn: false
      }
   },
   method: {
      defaultPermissionState(id, type, e) {
         this.disableBtn = true;
         this.btnText = 'Clicking.....';
      }
   }
}

Answer 4

隐藏按钮并使用数据或计算属性显示微调器。 从您的异步函数中更新 'busy' 属性。

<button v-if='!busy' @click="defaultPermissionState(perm.id,'grant',$event)">Deny</button>
<spinner v-else />

Answer 5

您可以使用 $event 更改按钮的内部 html

$event.path[0].innerHTML = "Write the inner html"