[Vuejs]-Disabled quantity conditionally in Vue JS

by

3👍

✅

As you are passing disabled as a prop to the base-quantity component you need to handle that in the component and then disable the + and - button on the prop value.
Also, to change the border-color you can use the class binding concept of vue.

Vue.component('base-quantity', {
  template: `
          <div :class="disabled ? 'quantity__untoggle' : 'quantity__toggle'">
        <button :disabled="disabled" type="button" @click="decrement" class="btn quantity__decrement">-</button>
        <input type="text" class="quantity__value" :value="quantity" readonly>
        <button :disabled="disabled" type="button" @click="increment" class="btn quantity__increment">+</button>
    </div>
  `,
  data(){
        return{
            quantity: 0
        }
    },
  watch:{
        quantity :function(val){         this.$emit('updateQuantity',val);
        }
    },
  props: ['disabled'],
  methods :{
     increment () {
       this.quantity++
     },
     decrement () {
       if(this.quantity === 0) {
          alert('Negative quantity not allowed')
        } else {
           this.quantity--
        }
      }
    }
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      types: [
        {
          name: "Type 1",
          value: 60,
        },
        {
          name: "Type 2",
          value: 70,
        },
      ],
      selectedType: "",
    };
  },
});
.quantity__toggle {
    position: relative;
    border: 1px solid #ff4555;
    height: 30px;
    display: inline-flex;
    overflow: hidden;
}

.quantity__untoggle {
    position: relative;
    border: 1px solid #cacaca;
    height: 30px;
    display: inline-flex;
    overflow: hidden;
}

.btn{
    width: 38px;
    padding: 0;
    background-color:transparent;
    border:none;
    cursor: pointer;
}


.quantity__value {
    border: none;
    margin: 0;
    padding: 0;
    width: 60px;
    text-align: center;
    font-size: 14px;
}

.quantity__value:focus, .btn:focus{
    box-shadow: none;
    outline: none;
}

select{
  margin: 20px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div
       class="form-check form-check-inline"
       v-for="data in types"
       v-bind:key="data.name"
     >
     <input
       class="form-check-input"
       type="radio"
       name="types"
       :id="'select-' + data.name.toLowerCase()"
       :value="data.name"
       v-model="selectedType"
       />
     <label
       class="form-check-label"
       :for="'select-' + data.name.toLowerCase()"
     >{{ data.name }}</label
     >
    </div>
    <select class="custom-select" id="inputGroupSelect02" :disabled="selectedType === 'Type 2' || selectedType === ''">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
     </select>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
</div>
👤Yash Maheshwari

Leave a comment