How to conditionally disable a button in Vue v-for loop

Question

I have the following code, every time the condition is true, the disabled is affecting all of the buttons in all the items.

I have searched and couldn't find the proper way of doing it, can someone shed some light please?

The purpose of this is to limit the number of an item that the user can add to the shopping basket by disabling the + button.

            <tbody v-for="(item, index) in getMenuItems" :key="index">
                <tr>
                    <td><strong>{{ item.name }}</strong></td>
                </tr>
                <tr v-for="(option, index) in item.options" :key="index" >
                    <td>{{ option.size }}</td>
                    <td>{{ option.price}}</td>
                    <td >
                        <button 
                            class="btn btn-sm btn-outline-success"
                            type="button"
                            @click="addToBasket( item, option)"
                            :disabled="itemdisabled=='disabled'"
                        >+</button>
                    </td>
                        {{ basket }}
                </tr>
            </tbody>

it looks like you want item.disabled instead of itemdisabled — ippi
– ippi, Commented Jun 15, 2018 at 8:29
I have a method in 'addToBasket' which tracks the number of items added to the basket like so: this.basket[this.counter].quantity > this.itemMaxQty ? this.basket[this.counter].disabled = "disabled" : this.basket[this.counter].disabled = ""; — Don Chan
– Don Chan, Commented Jun 15, 2018 at 9:15

ittus · Accepted Answer · 2018-06-15 08:26:29Z

7

You can use computed or methods to check disabled.

For example:

<tbody v-for="(item, index) in getMenuItems" :key="index">
  <tr>
      <td><strong>{{ item.name }}</strong></td>
  </tr>
  <tr v-for="(option, index) in item.options" :key="index" >
      <td>{{ option.size }}</td>
      <td>{{ option.price}}</td>
      <td >
          <button 
              class="btn btn-sm btn-outline-success"
              type="button"
              @click="addToBasket( item, option)"
              :disabled="isDisable(option, index)"
          >+</button>
      </td>
          {{ basket }}
  </tr>
</tbody>

<script>
  export default {
    ...
    methods: {
      isDisable(option, index) {
        // check option and index
        // return true - disable, false - active
      }
    }
  }
</script>

answered Jun 15, 2018 at 8:26

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Don Chan Over a year ago

My disable logic works, but the problem is due to the v-for, it disables all of the buttons in the table.

ittus Over a year ago

That's why you need to check isDisable(option, index), base on option and index, you only return true on item you want to be disabled

Don Chan Over a year ago

Hey thanks @ittus, I got it working, but is it an efficient way of doing it having to loop through the basket on every render? jsfiddle here

Collectives™ on Stack Overflow

How to conditionally disable a button in Vue v-for loop

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related