title: How to conditionally disable a button in Vue v-for loop
body: <p>I have the following code, every time the condition is true, the disabled is affecting all of the buttons in all the items.</p>
  
  <p>I have searched and couldn't find the proper way of doing it, can someone shed some light please?</p>
  
  <p>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.  </p>
  
  <pre><code>            &lt;tbody v-for="(item, index) in getMenuItems" :key="index"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;strong&gt;{{ item.name }}&lt;/strong&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr v-for="(option, index) in item.options" :key="index" &gt;
                      &lt;td&gt;{{ option.size }}&lt;/td&gt;
                      &lt;td&gt;{{ option.price}}&lt;/td&gt;
                      &lt;td &gt;
                          &lt;button 
                              class="btn btn-sm btn-outline-success"
                              type="button"
                              @click="addToBasket( item, option)"
                              :disabled="itemdisabled=='disabled'"
                          &gt;+&lt;/button&gt;
                      &lt;/td&gt;
                          {{ basket }}
                  &lt;/tr&gt;
              &lt;/tbody&gt;
  </code></pre>