在 Vue JS 应用程序中单击按钮后如何将其更改为禁用

Question

我想知道如何在单击按钮后将其更改为禁用，但数据来自其余 api，因此我只想禁用该列表项上的按钮，而不是所有按钮。我看不到在 VueJS 中在哪里执行此操作。这是addItem button哪个代码是：<button   type="button"   class="btn btn-primary btn-lg mb-3 float-right"   v-on:click="addItem(result)"   >   <font-awesome-icon icon="plus"/></button>列表组件<template>  <div class="mb-5 container">    <button type="button" class="btn btn-primary mt-2 mb-2 btn-block">      My List      <span class="badge badge-light">{{List.length}}</span>    </button>    <ul class="list-group" v-for="(result, index) in List" :key="index">      <li class="list-group-item">        <b>{{result.collectionName}}</b>        <h6 class="mt-0">{{result.artistName}}</h6>        <p class="mt-0">{{result.primaryGenreName}}</p>      </li>    </ul>    <ul></ul>  </div></template><script>export default {  props: [      'List',  ],};</script>所以这个想法是用户可以向列表组件添加一个项目，但显然他们不能继续添加该项目，所以这就是为什么我需要在点击后禁用该按钮。

Answer 1

尝试：

<button

   type="button"

   class="btn btn-primary btn-lg mb-3 float-right"

   v-on:click="addItem(result)"

   :disabled="result.disableButton">

   <font-awesome-icon icon="plus"/>

</button>

在你的方法中：

addItem: function(result) {

      result.disableButton = true; // Or result['disableButton'] = true;

      this.List.push(result);

    },