Vuejs définit un maximum variable pour une entrée numérique

Question

J'ai le vue js suivant 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>

Je n'ai pas été capable de trouver un bon moyen de faire fonctionner quelque chose comme ça.

La quantité est variable, et je suppose que je pourrais peut-être créer une fonction qui vérifie le nombre après chaque entrée et génère une erreur lorsqu'il est supérieur, mais ce n'est pas vraiment le but.

En tout cas, désolé si c'est une question stupide mais merci d'avance pour votre aide !

Answer 1

Vous pouvez utiliser la validation du formulaire HTML pour les entrées (type="nombre") :

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

Si l'entrée est supérieure à max alors il y aura une erreur lors de la soumission du formulaire.

Answer 2

Je pense que ce que vous voulez faire est de limiter le nombre d'éléments dans <input type='number' :max='quantCheck'/> sur la base de la quantity de l'élément dans votre cart . Si c'est le cas, il y a quelques éléments qui peuvent être améliorés dans votre composant.

D'abord, vous liez :max="quantityCheck" à votre entrée. en regardant votre composant, vous avez défini quantityCheck dans l'option des méthodes.

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

C'est incorrect, il n'y a pas de déclaration de méthode. Vous devrez limiter le nombre de caractères à l'aide de la fonction quantity directement :

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>

Ce qui précède fonctionne, pour le tester, entrez une valeur supérieure à la quantité et l'entrée devrait se mettre en évidence sur blur

Si vous voulez une meilleure validation, je vous suggère d'utiliser Vee-Validate pour un moyen simple de valider vos entrées.

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