Laravel VueJS привязывает динамическое количество к каждому входу в компоненте списка продуктов

Попытка создать динамическую форму со списком каждого продукта из БД. Форма имеет следующие поля для каждого продукта: название продукта, цена продукта, количество и общая стоимость. Моя проблема заключается в том, что я не уверен, как добавить поле v-модели для каждого ввода количества продукта, поскольку список извлекается из v-для всех продуктов. Вот часть моего шаблона Компонент vue ProductsListForm:

<div v-for = "product in products" :key = "product.id" class = "flex form-group">

  <div class = "flex p-title">
    <label :for = "product.title">{{ product.title }}</label>
    <small>{{ product.price }}$</small>
  </div>

  <div class = "flex p-input">
    <input class = "input" type = "number" :name = "product.title" v-model = "quantity">
  </div>

  <div class = "flex p-total">
    <span>Total: {{  product.price * quantity}}</span>
  </div>

</div>


export default {
  props: ['products'],
  data() {
      return {
          quantity: 0,
      }
  },
  methods: {}
}

Итак, мой вопрос: как я могу привязать количество к каждому отдельному продукту? Прямо сейчас он, очевидно, меняется всякий раз, когда обновляется ЛЮБОЕ поле ввода... Любая помощь будет оценена!

Является ли quantity информацией, которая есть у каждого продукта? Работает ли он, когда вы называете его product.quantity?

— 20.01.2019 10:17

v-modeling свойство элемента массива работает, как вы можете видеть в этой скрипте: jsfiddle.net/Йовар/nj0w7oye/3

— 20.01.2019 10:34

@ Yovar quantity не имеет отношения к каждому продукту. Это переменная, связанная с самой формой. Когда я пытаюсь сделать это таким образом, общее количество равно NaN

— 20.01.2019 10:37

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

— 20.01.2019 10:42

javascript php laravel vue.js

20.01.2019 09:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 084

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Чтобы количество было связано с продуктом (ввод продуктов) - вам нужно будет передать его продуктам или сделать его массивом.

<div v-for = "product in products" :key = "product.id" class = "flex form-group">

  <div class = "flex p-title">
    <label :for = "product.title">{{ product.title }}</label>
    <small>{{ product.price }}$</small>
  </div>

  <div class = "flex p-input">
    <input class = "input" type = "number" placeholder = "1" :name = "product.title" v-model = "quantity[product.id]">
  </div>

  <div class = "flex p-total">
    <span>Total: {{  product.price * getProductQuantity(product) }}</span>
  </div>

</div>


export default {
  props: ['products'],
  data() {
      return {
          quantity: [],
      }
  },
  methods: {
    getProductQuantity(product) {
      return this.quantity[product.id] || 0;
    }
  }
}

20.01.2019 10:41

Ответ принят как подходящий

Вместо использования v-model вы можете прослушивать события input для каждого элемента.

new Vue({
  el: '#app',
  data: () => ({
    cart: [],
    products: [{
        id: 1,
        name: 'foo'
      },
      {
        id: 2,
        name: 'bar'
      },
      {
        id: 3,
        name: 'baz'
      }
    ]
  }),
  methods: {
    updateCart(event, product) {
      const index = this.cart.findIndex(i => i.name === product.name)

      const item = {
        name: product.name,
        quantity: event.target.value
      }

      if (index !== -1) {
        this.cart.splice(index, 1, item)
      } else {
        this.cart.push(item)
      }
    }
  }
})

ul,
li {
  list-style: none;
}

#app {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id = "app">
  <div>
    <h5>products</h5>
    <ul>
      <li v-for = "product in products" :key = "product.id">
        <label>{{ product.name }}</label>
        <input @input = "updateCart($event, product)" min = "0" type = "number">
      </li>
    </ul>
  </div>
  <div>
    <h5>cart</h5>
    <ul v-if = "cart.length">
      <li v-for = "item in cart" :key = "item.id">
        <p>{{ item.name }} {{ item.quantity }}</p>
      </li>
    </ul>
    <p v-else>no items in cart</p>
  </div>
</div>

20.01.2019 11:14

Другие вопросы по теме

Эхо POST в строку SQL

Можно ли сохранить кликабельное изображение в PHP MYSQL?

Reactjs html получить запрос, не полученный php

Добавить новые элементы из массива в комбинированный массив, сопоставив ключ

Как скрыть определенные формы, такие как формы входа, когда человек вошел в систему?

Подсчитывать и добавлять значения массива в массив php

Мой код обновляет только последнюю строку моей базы данных, а не вторую или ту, которую я хочу, только и всегда последнюю

Пул запросов для php curl

Как установить глобальную переменную в Laravel?

Поиск и получение двойного результата в PHP

Laravel VueJS привязывает динамическое количество к каждому входу в компоненте списка продуктов

Ответы 2

Другие вопросы по теме

Похожие вопросы