¿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:
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!.