0

¿Cómo van?, espero que muy bien!. El día de hoy vengo a postear una duda; Estoy trabajando con vue 2, axios y Bootstrap (especialmente tengo dificultades con el tema de vue, ya que es algo que nunca había trabajado antes y pues el proyecto escolar me lo pide), entonces, pues estoy intentando trabajar con la generación de un catalogo de productos tomando una API hecha por mí con un carrito de compras. Pues, lo que estoy haciendo es que estoy intentando ponerle un input dentro del v-for que genera cada tarjeta, pero estos no toman un valor único a la hora de llenarlos ya que el v-model es compartido sino que se "duplican", por así decirlo,a nivel de funcionamiento no molesta ya que pues se puede modificar antes de enviarlo, pero, a nivel de vista si se ve mal esto. ¿Hay alguna forma de hacer que estos tomen un valor único?, ¿O tomar el valor del input sin necesidad de tener el v-model?...

Imagen de lo que pasa en los inputs:

introducir la descripción de la imagen aquí

Código de la template:

<template>
  <div>
    <div class="productsrow">
      <b-card v-for="prod in productos" v-bind:key="prod.id"
        :title="prod.nom_prod"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 18rem;"
        class="mb-3"
      >
        <b-card-text>
          {{prod.Descripcion}}
        </b-card-text>
        <div class="butt">
          <b-form-input  v-model="max" :type="'number'" min="1"></b-form-input>
          <b-button href="#" id="btnColor" v-on:click="anadirCarrito(prod.id_Prod, max)">{{ponerComas("es-CO", "COP", 0, prod.Precio * max)}}</b-button>
        </div>
      </b-card>
      <div>
        <b-button v-b-toggle.sidebar-1 class="cartbtn"><b-icon icon="cart-fill"></b-icon> {{itemscart}}</b-button>
        <b-sidebar id="sidebar-1" title="Carrito" shadow>
          <div class="px-3 py-2">
            <p>

            </p>
          </div>
        </b-sidebar>
      </div>
    </div>
  </div>
</template>

Código función data:

export default {
  name: "Catalogo",
  data: function (){
    return {
      producto: null,
      productos: [],
      carrito:"{",
      total: 0,
      max: 1,
      itemscart: 0
    }
  },

Obtener productos:

methods: {
    getProds: function (){
      if(localStorage.getItem("token_access") === null || localStorage.getItem("token_refresh") === null){
        this.$emit('logOut');
        return;
      }
      let este = this;
      let token = localStorage.getItem("token_access");

      axios.get('https://url/producto/', {headers: {'Authorization': `Bearer ${token}`}})
          .then(function(response){
            console.log(response.data);
            este.productos = response.data;
          })
    }
  }

Inserté sólo esa parte, ya que considero que no es necesario insertar más, ¡agradecería mucho su ayuda!.

2
  • Puedes agregar tu parte del código donde obtienes los productos, porfavor Commented el 29 oct. 2021 a las 2:35
  • @JonathanOrta ya lo hice, aunque sigo sin verlo necesario ya que el problema que estoy teniendo es con el v-model a la hora de mover el input generado por el v-for de las tarjetas que tiene que ver con la cantidad que en vez de moverse solo 1 se mueven todos.
    – KuroDev
    Commented el 29 oct. 2021 a las 2:42

2 respuestas 2

3

Cuando colectes los datos desde la API, debes modificar el array que recibes para obtener una variable por cada elemento

este.productos = response.data.map(prod => {
    prod.max = 0;
    return prod;
});

De esta forma, puedes cambiar el v-model de cada input

<b-form-input  v-model="prod.max" :type="'number'" min="1"></b-form-input>
<b-button href="#" id="btnColor" v-on:click="anadirCarrito(prod.id_Prod, prod.max)">
1
  • Perfecto!; Muchisimas gracias amigo!.
    – KuroDev
    Commented el 29 oct. 2021 a las 3:50
0

Debes agregarle a cada producto que viene de tu base de datos un campo adicional el cual puedes usar para las cantidades de compra de tu usuario que sea distinto del minimo o maximo de compra de ese producto.

// Lista de productos a mostrar

  const listaDeProductos = [];

 function completarProductos(productosBD) {

   for(let index = 0; index < productosBD.length; index++) {

    listaDeProductos.push({

    ...productos[index],

    quantity: productosBD[index].min,

   });

  }

 }
2
  • Hola jochdev, bienvenido, gracias por colaborar, aunque tu pregunta no parece solucionar el problema planteado, te sugiero que la elimines, para evitar recibir votos negativos, Mira como responder para evitar votos negativos y/o que tu repuesta sea eliminada. Aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener tu primer medalla! Commented el 14 mar. 2023 a las 15:58
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 14 mar. 2023 a las 19:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.