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

我想知道如何在单击按钮后将其更改为禁用,但数据来自其余 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>

所以这个想法是用户可以向列表组件添加一个项目,但显然他们不能继续添加该项目,所以这就是为什么我需要在点击后禁用该按钮。


幕布斯6054654
浏览 301回答 1
1回答

喵喵时光机

尝试:<button&nbsp; &nbsp;type="button"&nbsp; &nbsp;class="btn btn-primary btn-lg mb-3 float-right"&nbsp; &nbsp;v-on:click="addItem(result)"&nbsp; &nbsp;:disabled="result.disableButton">&nbsp; &nbsp;<font-awesome-icon icon="plus"/></button>在你的方法中:addItem: function(result) {&nbsp; &nbsp; &nbsp; result.disableButton = true; // Or result['disableButton'] = true;&nbsp; &nbsp; &nbsp; this.List.push(result);&nbsp; &nbsp; },
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript