1

Hola que tal como estan?,

tengo dos inputs:

 <tr>
                        <div class="col-md-16">
                            <td>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Agregar Pedido..." v-model="nuevaTarea">

                                </div>
                            </td>
                        </div>
                        <!-- Cantidad -->
                        <div class="col-md-6">
                            <td>
                                <div class="input-group mb-3">
                                    <input type="number" class="form-control" placeholder="Cantidad.." aria-label="Cantidad" aria-describedby="basic-addon2" v-on:keyup.enter="agregarTarea" v-model.number="cantidad">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary rounded-0" @click="agregarTarea" type="submit">
                                            +
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </div>

                    </tr>

ya el primero logro guardarlo correctamente utilizando esto en mi archivo js:

const app = new Vue({


    el: '#app',
    data: {

        titulo: 'Listado de tareas',
        tareas: [],
        nuevaTarea: ''

    },

    methods: {



        agregarTarea: function () {

            this.tareas.push({

                nombre: this.nuevaTarea,
                estado: 'pendiente',

            });

            this.nuevaTarea = '';
            localStorage.setItem('app-vue', JSON.stringify(this.tareas));


        },

lo que necesito es el segundo input poder almacenarlo de alguna manera para luego poder sacar un total de las cantidades que se ingresen en el formulario. Soy bastante nuevo con Vue JS y ya busque otras respuestas pero no logro dar con alguna que me explique como lograr esto que necesito, desde ya muchas gracias si alguien es tan amable como para explicarme

Cualquier cosa estoy a su disposición.

10
  • Varias cosas no entiendo. cual logras guardar? porque decis que el otro no lo logras guardar? los queres guardar localmente para poder acceder en otro momento de la vida o porque motivo?
    – gbianchi
    Commented el 26 sept. 2019 a las 3:18
  • @gbianchi el primer input que es para guardar una tarea o pedido tengo el código en vue js que me lo guarda localmente, y al regresar el navegador me queda guardado. El segundo input que es de cantidad no sé cómo guardarlo para luego mostrarlo debajo de todo como un total de la cantidad de pedidos Commented el 26 sept. 2019 a las 10:09
  • Que queres mostrar en el segundo? Entonces no deberia ser un input. Eso ez para entrada. Y vos solo queres mostrar
    – gbianchi
    Commented el 26 sept. 2019 a las 11:02
  • @gbianchi nono quiero que se ingresé por input también la cantidad y se almacene localmente y luego se muestre en un total Commented el 26 sept. 2019 a las 11:18
  • Pero ya lo estas haciendo en la funcion que guarda los items. Porque no haces lo mismo? Que problema tuviste con eso?
    – gbianchi
    Commented el 26 sept. 2019 a las 11:31

1 respuesta 1

1

Primera recomendación: entiende tu código. copiar y pegar porque si, no tiene mucho sentido si no sabes que hace cada parte.

Segunda recomendación: utiliza el manual oficial de vue. Es una excelente guia y te lleva paso a paso.

Ahora, no explicas que no entendes de tu codigo. Pero por lo que preguntas y lo que tenes ya escrito, parece que no entendiste como funcion v-model, data, y la función LocalStorage

V-model.number hace que ese input sea tomado como numero y no como string.

Ahora, vos pusiste v-model.number="cantidad".. pero cantidad no figura en tu data, lo que nos lleva al siguiente tema..

En este momento, si apretas f12 y ves la consola de tu navegador, esta llena de errores. cantidad no esta definido en el data.. ese es uno de los errores... porque? Porque se usa data para guardar las variables que van a contener los datos de tu modelo. y en este momento, dentro de tu data:

data: {

    titulo: 'Listado de tareas',
    tareas: [],
    nuevaTarea: ''

},

no esta cantidad. Hay que agregarlo ahi, porque cada opcion que agreguemos en un v-model tiene que tener su correspondiente variable en el data.

Y luego, nos falta un detalle mas.. dentro de tu metodo agregarTarea, solo estas guardando this.tareas.. pero nunca cantidad, ya que no lo tenias dentro de tu data. Agrega lo mismo, pero guarda tambien cantidad...

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.