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

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

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

现在，我知道如何在jQuery甚至纯JS中实现这一点，但我不知道如何访问VUE.JS中的按钮属性

我的按钮如下所示：

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

但这看起来不是一个非常优雅的解决方案，因此如果有人知道更好的解决方案，我仍然希望听到它

您可以使用

：disabled

。检查以下快速示例：

newvue({
el:“应用程序”，
数据：{
isLoadingArray:[]
},
方法：{
单击（索引）{
this.$set（this.isLoadingArray，index，true）
设置超时（（）=>{
this.$set（this.isLoadingArray，index，false）
}, 2000)
}
}
})

.lds双环{
显示：内联块；
宽度：64px；
高度：64px；
}
.lds双环：后{
内容：“；
显示：块；
宽度：46px；
高度：46px；
保证金：1px；
边界半径：50%；
边框：5px实心#fff；
边框颜色：#fff透明#fff透明；
动画：lds双环1.2s线性无限；
}
@lds双环的关键帧{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

点击我
点击我
点击我

您可以与

：disabled一起使用。检查以下快速示例：


newvue({
el:“应用程序”，
数据：{
isLoadingArray:[]
},
方法：{
单击（索引）{
this.$set（this.isLoadingArray，index，true）
设置超时（（）=>{
this.$set（this.isLoadingArray，index，false）
}, 2000)
}
}
})
.lds双环{
显示：内联块；
宽度：64px；
高度：64px；
}
.lds双环：后{
内容：“；
显示：块；
宽度：46px；
高度：46px；
保证金：1px；
边界半径：50%；
边框：5px实心#fff；
边框颜色：#fff透明#fff透明；
动画：lds双环1.2s线性无限；
}
@lds双环的关键帧{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}

点击我
点击我
点击我
你可以这样做

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>

{{waiting？'waiting…'：'Deny'}

因此，基本上，只需在发出请求之前设置一个标志，并在调用结束时将其设置回原位。使用此标志将按钮值设置为您想要的任何值
您可以这样做

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>

{{waiting？'waiting…'：'Deny'}

因此，基本上，只需在发出请求之前设置一个标志，并在调用结束时将其设置回原位。使用此标志可将按钮值设置为所需的值
隐藏按钮并使用数据或计算属性显示微调器。从异步函数更新“busy”属性

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

拒绝
隐藏按钮并使用数据或计算属性显示微调器。从异步函数更新“busy”属性

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

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

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

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

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

这应该会有所帮助

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


{{btnText}}
导出默认值{
数据（）{
返回{
btnText:'拒绝'，
禁用btn：错误
}
},
方法：{
defaultPermissionState（id、类型、e）{
this.disableBtn=true；
this.btnText='单击..'；
}
}
}
这应该会有所帮助

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


{{btnText}}
导出默认值{
数据（）{
返回{
btnText:'拒绝'，
禁用btn：错误
}
},
方法：{
defaultPermissionState（id、类型、e）{
this.disableBtn=true；
this.btnText='单击..'；
}
}
}
绑定disabled属性
：disabled=“isLoading”
@Socrates Tuas-除了表可以有许多行，50+甚至，这取决于数据库中的内容，因此如果我将isLoading设置为true，那么我的所有按钮都将更改statebind disabled属性
：disabled=“isLoading”
@Socrates Tuas-除了表中可能有许多行，50+偶数，这取决于数据库中的内容，因此如果我将isLoading设置为true，那么我的所有按钮都将改变状态。问题是，该表中可能有许多行，50+偶数，因此，如果我将isLoading设置为true，所有按钮都将变为truedisabled@ps-然后，hyp pt将值存储在数组中。检查更新。问题是该表中可能有许多行，甚至50+行，因此如果我将isLoading设置为true，所有按钮都将变为truedisabled@ps-然后，hyp pt将值存储在数组中。检查更新。