Vuejs set a variable maximum for a number input

Question

I have the following vue js script:

 <template>
    <div>
        <div v-if='cart.length > 0'>
            <h1>Your Cart</h1>
        <template>
            <fieldset v-for='product in cart'>
                <image :src='product.image'
                <h4>{{product.name}}</h4>
                <input type='number' :max='quantCheck'/>
                <h5>{{product.price}}</h5>
            </fieldset>
        </template>
        </div>
        <div v-else><h1>Your Cart Is Empty</h1></div>
        <br />
        <h5>Subtotal: </h5>
        <h5>Shipping: Free for a limited time!</h5>
        <h2>Total: </h2>
    </div>
    </template>
    <script>
    const apiURL = 'http://localhost:3000';
    import axios from 'axios';
    export default {
        data() {
            return {
                cart: [
                        {
                    id:"56461",
                    name:"lilly",
                    quantity: 2,
                    price: 30.10
                    }, {
                    id:"1253",
                    name:"wild",
                    quantity: 1,
                    price: 31.10
                    }
                    ]
                }
            },
        methods: {
                let quantCheck = this.cart.product.quantity

        }
        }
    </script>

I haven't been able to find a good way to make something like this work.

The quantity is variable, and I guess maybe I could make a function that checks the number after each input and pops an error when it goes above but that's not quite the goal.

Anyway sorry if this is a stupid question but thanks for your help in advance!

If I understand this correctly - you only want shoppers to have the ability to add, lets say, 5 'lilly' products and 10 'wild' products? Will this max quantity remain constant for all products or will each product have it's own max quantity? — Matt Oestreich
– Matt Oestreich, Commented Mar 14, 2019 at 15:14
Each product would have had it's own quantity as a prop. The below answer did work. Thank you — Trevor Jakeman
– Trevor Jakeman, Commented Mar 14, 2019 at 16:09

Sajib Khan · Accepted Answer · 2019-03-14 15:19:51Z

16

You can use HTML Form validation for input (type="number"):

<input type='number' :max='product.quantity'/>

If the input is greater than max value then it will show error on Submit the form

answered Mar 14, 2019 at 15:19

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

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

2 Comments

Trevor Jakeman Over a year ago

I feel stupid, I would have sworn I tried that but maybe I was doing cart instead of product I don't remember. Thank you that did work

aswzen Over a year ago

not useful since user still can input it directly thru keyboard

Daniel Ormeño · Accepted Answer · 2019-03-14 17:01:11Z

I believe that what you want to do is limit the number of items in <input type='number' :max='quantCheck'/> based on the quantity property of the item in your cart. If this is the case, there's a few things that can be improved in your component.

First, you are binding :max="quantityCheck" to your input. looking at your component, you have defined quantityCheck in the methods option.

methods: {
    let quantCheck = this.cart.product.quantity
}

This is incorrect, there's no method declaration. You'll need to limit the number of characters using the quantity property directly:

new Vue({
  el: '#app',
  template: `
  <div>
    <fieldset v-for='product in cart'>
        <h4>{{product.name}}</h4>
        <input type='number' :max="product.quantity"/>
        <h5>{{product.price}}</h5>
    </fieldset>
  </div>`,
  data: () => ({
      cart: [
        {
          id: "56461",
          name: "lilly",
          quantity: 2,
          price: 30.10
        },
        {
          id: "1253",
          name: "wild",
          quantity: 1,
          price: 31.10
        }
      ]
    })
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

The above works, to test it, enter a value higher than the quantity and the input should highlight on blur

If you want better validation, I would suggest using Vee-Validate for a simple way to validate your inputs.

Using VeeValidate

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  template: `
      <div>
        <fieldset v-for='product in cart'>
            <h4>{{product.name}}</h4>
            <input v-validate="'max_value:'+product.quantity" :name="product.name" type="number">
            <span v-if="errors.first(product.name)">Quantity cannot be more than {{product.quantity}}</span>
            <h5>{{product.price}}</h5>
        </fieldset>
      </div>`,
  data: () => ({
    cart: [{
        id: "56461",
        name: "lilly",
        quantity: 2,
        price: 30.10
      },
      {
        id: "1253",
        name: "wild",
        quantity: 1,
        price: 31.10
      }
    ]
  })
});

<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

I can enter a quantity >2 and nothing happens, and link is broken to vee-validate

Collectives™ on Stack Overflow

Vuejs set a variable maximum for a number input

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related