Vuejs устанавливает максимальную переменную для ввода числа

ProgramBox

Vuejs устанавливает максимальную переменную для ввода числа

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #html #vue.js

#javascript #HTML #vue.js

Вопрос:

У меня есть следующий скрипт 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>

Я не смог найти хороший способ заставить что-то подобное работать.

Количество является переменным, и я думаю, может быть, я мог бы создать функцию, которая проверяет число после каждого ввода и выдает ошибку, когда оно становится больше, но это не совсем цель.

В любом случае извините, если это глупый вопрос, но заранее спасибо за вашу помощь!

1. Если я правильно понимаю, вы хотите, чтобы покупатели имели возможность добавлять, скажем, 5 продуктов lilly и 10 продуктов wild? Будет ли это максимальное количество оставаться постоянным для всех продуктов или у каждого продукта будет свое собственное максимальное количество?

2. У каждого продукта было бы свое собственное количество в качестве реквизита. Приведенный ниже ответ действительно сработал. Спасибо

Ответ №1:

Вы можете использовать проверку формы HTML для ввода (тип =»число»):

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

Если ввод больше max значения, то при отправке формы будет отображаться ошибка

1. Я чувствую себя глупо, я бы поклялся, что пробовал это, но, возможно, я делал корзину вместо продукта, я не помню. Спасибо, что сработало

2. бесполезно, поскольку пользователь все еще может вводить его непосредственно с клавиатуры

Ответ №2:

Я полагаю, что то, что вы хотите сделать, это ограничить количество элементов в <input type='number' :max='quantCheck'/> на основе quantity свойства элемента в вашем cart . Если это так, в вашем компоненте есть несколько вещей, которые можно улучшить.

Сначала выполняется привязка :max="quantityCheck" к вашему вводу. глядя на ваш компонент, вы определили quantityCheck в опции методы.

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

Это неверно, нет объявления метода. Вам нужно будет ограничить количество символов, используя quantity свойство напрямую:

 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>

Вышеуказанное работает, чтобы проверить это, введите значение, превышающее количество, и ввод должен выделиться на blur

Если вы хотите улучшить проверку, я бы предложил использовать Vee-Validate для простого способа проверки ваших входных данных.

Используя 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>