Question

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

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

现在，我知道如何在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

隐藏按钮并使用数据或计算属性显示微调器。通过异步功能更新“忙”属性。

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

Answer 4

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

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

Answer 5

这应该有帮助

<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.....';
      }
   }
}

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

5 个答案: