How to delete data from a vue array and a table in html?

Question

How to delete data from a vue array and a table in html?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I have an arrangement defined in vue productos:[] I add elements with this function: (vue code)

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="";
        },

}

Now I have a view:

<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>

where I declare a:

@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

What I want is to remove the elements added in the productos:[] array and also delete the same element in the tablaProductos table when I press the corresponding row button 'btn'.

So far I can delete the elements of the view, but not the variable newContract.products

javascript html laravel vue.js vuex

asked by hans 10.04.2018 в 17:54

source

2 answers

1

From what I see, your code is not reactive because you are creating the DOM, you can not keep track of the DOM, when the data is reactive, you can follow it with Vue.set or $ set (), you could create an array and iterate it with v-for and when you push or pop the array, it will know that an element was added or deleted to the array, and it will activate reactivity alerts and update the DOM by removing the column or adding, using v-for, this is using an html template.

In the case that you are creating the elements, I recommend you use the render function of vuejs so that you can follow the DOM and activate the alerts of changes in the variables. This is very powerful,.

link

I also recommend you read the following section.

link

in specific Async-Update-Queue

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

Vue.js generally encourages developers to think in a "data-driven" way

This is very important I recommend you check this part of the documentation so you can experience the power of Vue.js

answered by 10.04.2018 в 20:41

consultation with use of Case in Mysql? How to convert the format of the date and time consulted from the Internet?

score 1 · Accepted Answer

I found a partial solution, in this case it helps me since my product arrangement in the worst case will be 20 items. What I did was add a new function every time I clicked on the table, the elements of the table converted them into an array and assigned that array to the one I used, every time I modified the table, the array was cleaned again and assigned the data of the html table

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);
            }
        },

and the table called the function as follows:

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

that modified the table in the products arrangement, for the visualization of the data add:

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

the functions are not related, one deletes the data from the table in a visual way, the other when an action occurs in the table, re-copies all the data to the used array.