Vue.js为数字输入设置最大变量

Question

我有以下vue js脚本：

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

我一直无法找到一种好的方法来完成类似的工作。

数量是可变的，我想也许我可以创建一个函数来检查每个输入后的数字，并在数字超过该数字时弹出错误，但这并不是目标。

无论如何，如果这是一个愚蠢的问题，对不起，但是感谢您的提前帮助！

Answer 1

您可以将HTML表单验证用于输入（类型=“数字”）：

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

如果输入大于max值，那么它将在提交表单时显示错误