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!
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.