javascript - 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>