0

estoy empezando a a trabajar con Vue, y tengo un pequeño problema que no se como resolver, intente todo y aun no puedo dar con la solucion, rencientemente acabo de terminar una miniaplicacion con vue donde agrego objetos en un array donde, estos objetos se ven reflajos en una lista y les di el dinamismo de poder editarlos desde la propia lista en forma de tabla, cuando activo la opción para editar la informacion mostrada en simples div pasan a ser inputs viculados con el valor de cada elemento conrrespondiente, pero uno de los inputs es datepicker, resulta ser que cuando hay mas de un elemento el unico elemento que no muestra el calendario es el ultimo y cuando hay solo uno no muestra el calendario. Si alguien puede ayudarme, se lo agradeceria mucho.


const app = new Vue({
    el:"#app",
    data:{
        producto:{
            nombre:"",
            codigo:"",
            precio:0,
            stock:0,
            ed:false,
            info:false
        },
        lista:[],
        checkedlist:[],

    },
    methods:{
        addProducto (){
            let {nombre, codigo, precio, stock}=this.producto;
            if(nombre==""){
                alertify.alert('Lo Sentimos', 'El campo nombre del producto no puede estar vacio', function(){ document.getElementById("nombre").focus(); });
                return false;
            }
            if(codigo==""){
                alertify.alert('Lo Sentimos', 'El campo código del producto no puede estar vacio', function(){ document.getElementById("nombre").focus(); });
                return false;
            }
            this.lista.push({
                nombre:nombre,
                codigo:codigo,
                precio:precio,
                stock:stock,
                ed:this.producto.ed,
                info:this.producto.info
            })
            this.producto.nombre=""; this.producto.codigo=""; this.producto.precio=0; this.producto.stock=0;
            // jQuery(".fecha").datepicker('remove');
            jQuery('.fecha').each(function() {
                jQuery(this).datepicker({
                    changeMonth:true,
                    changeYear: true
                });
            });

        },
        VnumeroStock(){
            let stock = this.producto.stock.replace(/\D/g, '');
            this.producto.stock=stock;
        },
        eliminar(index){
            this.lista.splice(index, 1);
        },
        todos(e){
            if(e.target.checked){ 
                let elementos = document.getElementsByClassName("checks");
                for(let x=0; x<elementos.length; x++){
                    if(elementos[x].checked==false){
                        elementos[x].click();
                    }
                }
                console.log(this.checkedlist.length);
                
            }else{
                let elementos = document.getElementsByClassName("checks");
                for(let x=0; x<elementos.length; x++){
                    if(elementos[x].checked==true){
                        elementos[x].click();
                    }
                }
                console.log(this.checkedlist.length);
            }
        },
        eliminar2(){
            let elementos = document.getElementsByClassName("checks");
            for(let x=0; x<elementos.length; x++){
                if(elementos[x].checked==true){
                    let cod = elementos[x].value;
                    this.lista = this.lista.filter(function(dato){ if(dato.codigo==cod){return false;}else{return true;}})
                    this.checkedlist = [];
                }
            }
            let check = document.getElementById("chkeliminar");
            if(check.checked){check.click();}
        },

    },
    computed:{
        total(){
            let total=0.00;
            for(x in this.lista){
                total += (this.lista[x].precio * this.lista[x].stock);
            }
            return total;
        },
    },
})
jQuery(document).ready( ()=>{
    jQuery(".numeros").keyup(function() {
        let val = this.value;
        if (isNaN(val)) {
            val = val.replace(/[^0-9\.]/g, '');
            if (val.split('.').length > 2)
                val = val.replace(/\.+$/, "");
        }
        jQuery(this).val(val);
    });
    jQuery(".fecha").datepicker({
        changeMonth:true,
        changeYear: true
    });
    
    // jQuery('#icono').click(function() {
    //   jQuery("#fecha").focus();
    // });
})
.table tr.is-danger {
    background-color: #ff7a7a;
    color: #fff;
}
.table tr.is-info {
    background-color: #ffd77a;
    color: #000;
}
.inputs{
    width: 130px;
}
.ajs-button:hover{
    background-color:rgb(228, 255, 129) !important;
    cursor: pointer;
}
.ajs-button:active{
    background-color:rgb(255, 209, 108) !important;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <!-- Default theme -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <title>Almacen</title>
</head>
<body>
    <section class="hero is-dark">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
            Practica con Vue
        </h1>
        <h2 class="subtitle">
            Almacen de Prodcutos Electronica
        </h2>
        </div>
    </div>
    </section>
    <div id="app">
        <div class="box">
            <div class="columns">
                <div class="column">
                    <h4 class="title is-4">Cear Prodcutos</h4>
                    <div class="content">
                        <div class="field">
                            <label class="label">Nombre Del Producto</label>
                            <div class="control">
                                <input autocomplete="off" class="input" type="text" id="nombre" placeholder="Nombre Del Producto" v-model="producto.nombre">
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Código Del Producto</label>
                            <div class="control">
                                <input autocomplete="off" class="input" type="text" placeholder="Código Del Producto" v-model="producto.codigo">
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Precio Del Producto</label>
                            <div class="control">
                                <input autocomplete="off" class="input numeros" type="text" placeholder="Precio Del Producto" v-model="producto.precio">
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Stock Del Producto</label>
                            <div class="control">
                                <input autocomplete="off" class="input" type="text" placeholder="Stock Del Producto" v-model="producto.stock" @keyup="VnumeroStock">
                            </div>
                        </div>
                        <div class="field">
                            <div class="control">
                                <button class="button is-info" @click="addProducto">Agregar Al Almacen +
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <h4 class="title is-4">Listado de Prodcutos</h4>&nbsp;<button style="left: 82%;" class="button is-danger" @click="eliminar2()" v-if="checkedlist.length!=0">Eliminar</button>
                    <div class="content">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" name="chkeliminar" id="chkeliminar" @change="todos($event)"></th>
                                    <th><abbr title="Position">Nombre</abbr></th>
                                    <th>Codigo</th>
                                    <th><abbr title="Played">Precio</abbr></th>
                                    <th><abbr title="Won">Stock</abbr></th>
                                    <th><abbr title="Won">Fecha</abbr></th>
                                    <th><abbr title="Won">add</abbr></th>
                                <th><abbr title="Won">Acciones</abbr></th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                <th>Eliminar</th>
                                <th><abbr title="Position">Nombre</abbr></th>
                                <th>Codigo</th>
                                <th><abbr title="Played">Precio</abbr></th>
                                <th><abbr title="Won">Stock</abbr></th>
                                <th><abbr title="Won">Fecha</abbr></th>
                                <th><abbr title="Won">add</abbr></th>
                                <th><abbr title="Won">Acciones</abbr></th>
                            </tr>
                            </tfoot>
                            <tbody >
                                <tr v-for="(value, key, index) of lista" :key="key" :style="{ background: value.stock == 0 ? '#ff7a7a' : value.stock == 1 ? '#ffd77a' : value.stock <= 4 ? '#ffd77a' : 'white' }">
                                    <td><input type="checkbox" :name="key" :id="key" class="checks" :value="value.codigo"  v-model="checkedlist"></td>
                                    <td><div v-if="value.ed"><input type="text" class="inputs" name="editar" id="editar" v-model="value.nombre"></div><div v-if="!value.ed">{{value.nombre}}-{{key}} </div></td>
                                    <td><div v-if="value.ed"><input type="text" class="inputs" name="editar" id="editar" v-model="value.codigo"></div><div v-if="!value.ed">{{value.codigo}}-{{key}} </div></td>
                                    <td><div v-if="value.ed"><input type="text" class="inputs" name="editar" id="editar" v-model="value.precio"></div><div v-if="!value.ed">{{value.precio}}-{{key}} </div></td>
                                    <td><input type="text" name="stockVal" id="stockVal" v-model="value.stock" min="0" style="width: 49px;"></td>
                                    <td><input type="text"  class="fecha" style="width: 49px;"></td>
                                    <td><button @click="value.stock++">+</button><button @click="value.stock--" :disabled="value.stock == 0">-</button></td>
                                    <td><button class="button is-primary"  @click="value.ed=!value.ed">Editar</button>&nbsp;<button class="button is-danger" @click="eliminar(key)">Eliminar</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="columns">
                        <div class="column">
                            <div class="content">
                                <div class="field">
                                    <label class="label">Total + IVA</label>
                                    <div class="control">
                                        <input class="input is-primary" type="text" placeholder="Primary input" v-model="total">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                           
                        </div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="js/app.js"></script>
    <script src="js/validaciones.js"></script>
</body>
</html>
2

1 respuesta 1

0

Bienvenido a vue :)

El problema es que estas tratando de acceder obtener los inputs que tienen la clase fecha despues que la lista se actualiza pero antes de que vue actualiza la vista.

Vue tiene diferentes estados de ciclo de vida, cuando el componente se crea y se tiene acceso a la data entra el created, cuando la primera vista se renderiza entra el mounted... aqui una explicación detallada como estas usando jquery para las fechas jquery no sabe cuando vue actualiza la vista so trata de obtener la data y no hay nada, cuando tienes dos nunca obtiene el ultimo porque el ultimo es el que agregas.

La solucion la funcion nextTick, esta acepta una funcion que corre cuando el dom es actualizado.

Vue.nextTick()
          .then(function () {
            jQuery('.fecha').each(function() {
                jQuery(this).datepicker({
                    changeMonth:true,
                    changeYear: true
                });
            });
          })

https://codepen.io/larizzatg/pen/oNbRmzX?editors=1010

Recomendaciones Si el uso de jquery no es necesario, te recomiendo que uses el date picker nativo o los componentes de buefy ya que estas usando bulma https://buefy.org/ puedes usarlo sin tener un bundler.

Crea componentes: En tu caso crearia los siguientes componentes:

  • formulario producto
    • logica de crear un producto
    • emitir un evento cuando el producto sea validado algo como this.$emit("producto-agregado", this.product)
    • separar la logica de validar un producto de la de agregar
    • en vez de usar un div para contener los inputs usa un form, al boton tendras que ponerle @click.prevent="addProducto" para evitar que la pagina se refresque
  • listado productos
    • lista de productos que maneja el app
    • elimina productos
    • edita lista de productos
  • item-listado-productos
    • ahi puedes manejar la logica si le dan a editar mostrar los inputs
    • al editar se emite un evento con el producto editado
    • al eliminar se emite un evento con el id del producto que se quiere eliminar

normalmente haria que el listado de producto emita otros eventos para que el app o la vista maneje el estado pero puedes comenzar a refactorizar con lo que comente y es mas simple.

trata de usar mas funcionalidades de vue como refs para focus y directives para cambiar los textos a numero del stock.

cuando los inputs son numericos usa input="number"

Recursos

Tu Respuesta

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

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