0

Tengo definido un arreglo en vue productos:[] agrego elementos con esta funcion: (codigo vue)

var appmeta = new Vue({
        //
        el: '#v_meta',
        created: function(){
            this.getMetas();    
        },
    data:{
        metas:[],
        pagination:{
            'total' : 0,
            'current_page' : 0,
            'per_page' : 0,
            'last_page' : 0,
            'from' : 0,
            'to' : 0
        },
        newMeta:{META_intId: '', META_varSubMeta: '', META_varDenominacion: '', META_intYear: ''},
        fillMeta:{META_intId: '', META_varSubMeta: '', META_varDenominacion: '', META_intYear: ''},
        personaSeleccionada:'',
        newContrato:{CONT_intTiempoContrato:'',CONT_varProfesion:'',CONT_varGradoAcademico:'',CONT_douMontoTotal:'',CONT_intArmadas:'',META_intId:'',PERS_varDNI:'',CONT_datInicio:'',CONT_datFin:'',productos:[]},
},
methods:{

eltoProducto: function(){               

            document.getElementById('tablaProductos').style.visibility="visible";
            var table = document.getElementById("tablaProductos");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);

            var ncantidad= document.getElementById('Cantidad').value;
            var ntexto=document.getElementById('Productos').value;

            cell1.innerHTML = ncantidad;
            cell2.innerHTML = ntexto;
            cell3.innerHTML='<a href="# " class="btn btn-success btn-sm" onclick="delRow(this)">btn</a>';

            var elto={cantidad:ncantidad,denominacion:ntexto};
            this.newContrato.productos.push(elto);
            document.getElementById('Cantidad').value=0;
            document.getElementById('Productos').value="";
        },

}

ahora tengo una vista:

<table class="table table-hover table-striped table-bordered" id="tablaProductos" style="visibility: hidden;" >
                      <thead>
                                <th width="10px">Cantidad</th> 
                                <th>Denominación</th>
                                <th>Accion</th>
                      </thead>
                      <tbody>

                      </tbody>
 </table>

introducir la descripción de la imagen aquí

donde declaro un :

@section('scripts')
<script type="text/javascript">



    delRow = function(rr){
        var i = rr.parentNode.parentNode.rowIndex;
        document.getElementById("tablaProductos").deleteRow(i);
        this.newContrato.productos.splice(i,1);
    }; 

</script>
@endsection

lo que quiero es eliminar los elementos agregados en el arreglo productos:[] y tambien eliminar el mismo elemento en la tabla tablaProductos cuando presiono el botón de la fila correspondiente 'btn'.

Hasta ahora puedo eliminar los elementos de la vista, pero no de la variable newContrato.productos

2
  • Si deseas eliminar "todos" los elemento del arreglo , la forma más rápida es this.productos = [] ;
    – Dev. Joel
    el 10 abr. 2018 a las 16:03
  • quiero eliminar solo 1 elemento, el seleccionado por el boton "btn"
    – hans
    el 10 abr. 2018 a las 16:16

2 respuestas 2

1

Por lo que veo tu código no es reactivo ya que estas creando el DOM, vuejs no puede llevar un seguimiento del DOM, cuando los datos son reactivos vuejs lleva un seguimiento esto podrías hacerlo con Vue.set o $set(), podrías crear un array e iterarlo con v-for y cuando hagas push o pop al array vuejs va a saber que se agregó o eliminó un elemento al array, y va activar las alertas de reactividad y hará una actualización en el DOM eliminando la columna o agregando, utilizando v-for, esto es usando un template html.

en el caso que tu estas creando los elementos te recomiendo usar la función render de vuejs para que vuejs lleve el seguimiento del DOM y pueda activar las alertas de cambios en las variables esto es muy poderoso,.

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

https://v2.vuejs.org/v2/guide/render-function.html

también te recomiendo leer la siguiente sección.

https://v2.vuejs.org/v2/guide/reactivity.html

en especifico Async-Update-Queue

Vue.js generally encourages developers to think in a “data-driven” fashion and avoid touching the DOM directly

Vue.js generalmente alienta a los desarrolladores a pensar de una manera "basada en datos"

esto es muy importante te recomiendo revisar esta parte de la documentación para que puedas experimentar el poder de Vue.js

2
  • gracias por la información, revisare eso aunque encontré otra solución
    – hans
    el 10 abr. 2018 a las 20:09
  • @hans, si encontraste la solución, por favor compártela escribiendo una respuesta para que sea de ayuda para otros usuarios con el mismo problema
    – Alvaro Montoro
    el 11 abr. 2018 a las 0:27
1

Encontré una solución parcial, en este caso me sirve ya que mi arreglo de productos en el peor de los casos sera de 20 elementos. Lo que hice fue agregar un funcion vuejs cada vez que hacian click sobre la tabla, los elementos de la tabla los convertia en un arreglo y asignaba ese arreglo al que usaba, cada vez que modificaba la tabla, se vuelve a limpiar el arreglo y asignarle los datos de la tabla html

deleteRow:function(){
            //
            this.newContrato.productos=[];
            var table = document.getElementById("tablaProductos").getElementsByTagName('tbody')[0];

            var rows = table.rows;
            var cells, t;

              // Iterate over rows
            for (var i=0, iLen=rows.length; i<iLen; i++) {
                cells = rows[i].cells;
                var fila={Cantidad:cells[0].textContent,Denominacion:cells[1].textContent};
                this.newContrato.productos.push(fila);
            }
        },

y en tabla llamaba la funcion de la siguiente manera:

<table class="table table-hover table-striped table-bordered" id="tablaProductos" style="visibility: hidden;" v-on:click.prevent="deleteRow()">

eso modificaba la tabla en el arreglo productos, para la visualizacion de los datos agregue:

delRow = function(rr){
        var i = rr.parentNode.parentNode.rowIndex;
        document.getElementById("tablaProductos").deleteRow(i);
    };

las funciones no se relacionan, una elimina los datos de la tabla de manera visual, la otra cuando ocurre alguna accion en la tabla, vuelve a copiar todos los datos al arreglo usado.

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.