Question

我有以下代码，每次条件为真时，禁用都会影响所有项目中的所有按钮。

我已经搜索过，无法找到合适的方式，有人可以解决这个问题吗？

这样做的目的是通过禁用+按钮来限制用户可以添加到购物篮的项目数。

            <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>

Answer 1

您可以使用computed或methods来检查已停用。

例如：

<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>

如何在Vue v-for循环中有条件地禁用按钮

1 个答案: