Home / Questions / 441263
Accepted
vdjkelly
Asked: 2022-04-03 15:05:54 +0800 CST 2022-04-03 15:05:54 +0800 CST

Remove an object from a list and add via a checkbox in vuejs if it is checked or not

  • 772

Hello guys I have a list of objects which is composed as follows:

                    new Vue({
                            el: '#app',
                            data: {
                                checkedAnio: [2017,2018,2019,2020],
                                total_mensual:  {"2017":{"8":8402118,"12":16805365},"2018":{"1":3380427,"2":3383808,"6":1450000,"7":1741365,"8":11577539,"9":2588845,"10":3000000,"12":14868336},"2019":{"2":1594755,"3":11707602,"5":9460500,"9":6080000,"10":11900000,"11":18216520,"12":9779550},"2020":{"2":1443190,"3":44647800,"4":12288093,"8":19644587,"11":-342845469,"12":910439192}},
                                filterLista: {"2017":{"8":8402118,"12":16805365},"2018":{"1":3380427,"2":3383808,"6":1450000,"7":1741365,"8":11577539,"9":2588845,"10":3000000,"12":14868336},"2019":{"2":1594755,"3":11707602,"5":9460500,"9":6080000,"10":11900000,"11":18216520,"12":9779550},"2020":{"2":1443190,"3":44647800,"4":12288093,"8":19644587,"11":-342845469,"12":910439192}},                             entidades: {"10836904":"LUIS IGNACIO SALAZAR GALLEGOS","76035258":"Bruening Industrial","76122564":"Sociedad Comercializadora de Excedentes SpA","76122571":"Lampa SpA","76131794":"Sociadad comercializadora de excedentes Ferro Velh","76467560":"Inversiones Islam Ltda","76675405":"EQUIPOS Y MAQUINARIAS PINCHEIRA SPA","76829879":"Consorcio San Alberto de las Condes","76833156":"RECICLAJES REM SPA","76849049":"Comercializadora Alejandro Contreras SpA","76860599":"ACEROS DEL SUR S.A.","76898325":"RG Chile SpA","76914652":"Logistica Global Group SpA","76985375":"NUEVA LUZ DESECHOS LIMITADA","77078359":"ACEROS AMERICA SPA","77241295":"PATRICIA CORTES GUZMAN SPA","77418580":"Mantos Copper S.A","77612130":"SOC. COM. RECMETAL CIA. LTDA.","79587210":"Minera escondida limitada","92176000":"GERDAU AZA S.A.","96777810":"Polytex S.A","96935140":"SIDERVAL SA","99526550":"Ingenieria y montaje ferrovial s.a"},
                                pendientes: {"2017":{"8":{"99526550":8402118},"12":{"99526550":16805365}},"2018":{"1":{"99526550":3380427},"2":{"99526550":3383808},"6":{"76467560":1450000},"7":{"76675405":1741365},"8":{"76675405":11577539},"9":{"96777810":2588845},"10":{"76898325":3000000},"12":{"76035258":14868336}},"2019":{"2":{"76035258":1594755},"3":{"76675405":11707602},"5":{"79587210":9460500},"9":{"10836904":6080000},"10":{"76849049":11900000},"11":{"76914652":18216520},"12":{"76122571":9779550}},"2020":{"2":{"76122564":658878,"76675405":784312},"3":{"76122571":6746300,"77418580":37901500},"4":{"76860599":12288093},"8":{"76122571":3519040,"76829879":8986547,"76985375":7139000},"11":{"76833156":0,"79587210":-342845469,"96935140":0},"12":{"76131794":99960000,"76833156":43282120,"77078359":54621000,"77241295":110610500,"77612130":53818420,"79587210":534178302,"92176000":6156500,"96935140":7812350}}}
                            },
                            computed: {
                              listaMensual(){
                                return this.filterLista
                              }
                            },
                            methods: {
                               arrayRemove(anio) {
                                  delete this.listaMensual[anio]
                               }
                            }
                    })

            

            <div v-for="(meses, ano) in total_mensual">
                                        <label class="custom-control custom-checkbox custom-control-inline">
                                            <input type="checkbox" class="custom-control-input js-periodos mr-2" checked="" :value="ano"
                                                   v-model="checkedAnio"
                                                   :id="'anio_'+ ano"
                                                   @change="arrayRemove(ano)">
                                            <span class="custom-control-label">{{ ano }}</span>
                                        </label>
                                    </div>

The checkbox is already loaded with the years, when unchecking any of them, it eliminates the index by year of the monthlylist variable, but if I check it again, I would like this list of said year that was eliminated to be added again to the total_monthly variable, for example:

{"2017":{"8":8402118,"12":16805365}}

This would be the list:

<table class="table card-table table-vcenter text-nowrap table-hover" id="t-mayor">

                    <thead>

                    <tr>
                        <th style="background-color: white">Razón Social</th>
                        <template v-for="(meses, ano) in listaMensual">
                            <template v-for="(total_mes, mes) in meses">
                                <th class="js-data-" style="background-color: white">{{ printMonth(mes) }}  {{ ano  }}</th>
                            </template>
                        </template>
                        <th style="background-color: white">Totales</th>
                    </tr>

                    </thead>

                    <tbody>
                    <template v-for="(raz_soc, rut) in entidades">
                        <tr>
                            <td style="background-color: white">@{{ printName(rut) }}</td>
                            <template v-for="(meses, ano) in listaMensual">
                                <template v-for="(total_mes, mes) in meses">
                                    <td v-if="pendientes[ano][mes]">@{{ pendientes[ano][mes][rut] ? pendientes[ano][mes][rut] : 0 }}</td>
                                </template>
                            </template>
                            <td></td>
                        </tr>
                    </template>

                    </tbody>

                    <tfoot>
                    <tr>
                        <td style="background-color: #f5f5f5"></td>


                    </tr>
                    </tfoot>

                </table>

I have looked for a way to do it but in all of them I failed, I used filter but it always returned errors. If anyone in the community can help understand how to do it I would appreciate it.

vue.js

1 Answers

  1. Best Answer

    What to look for:

    In general , they checkboxcan give you that behavior of adding and removing from a list automatically v-modelwithout having to implement extra things, as in the following example:

    new Vue({
    el: '#app',
    data() {
        return {
            fruits: ['?', '?', '?', '?'],
            fruitsSelected: [],
        }
    }
})
    /* no es necesario, solo aumentamos el tamaño de letra*/
div, p {
    font-size: 25px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div v-for="fruit in fruits">
        <label>
            <input type="checkbox" :value="fruit" v-model="fruitsSelected" :id="fruit">
            {{ fruit }}
        </label>
    </div>
    <p> Selected {{fruitsSelected}}</p>
</div>

    If you want all the options to be selected by default , you need to fill the variable that you used in your v-model, if it is empty []it means that nothing has been selected, if it has more than one element it means that it is considered that several elements have already been selected by default but Vue takes care of knowing which ones:

    You can use mounted()to assign the value completely to your variable and everything is selected.

    new Vue({
    el: '#app',
    data() {
        return {
            fruits: ['?', '?', '?', '?'],
            fruitsSelected: [],
        }
    },
    mounted() {
        this.fruitsSelected = this.fruits
    }
})
    /* no es necesario, solo aumentamos el tamaño de letra*/
div, p {
    font-size: 25px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div v-for="fruit in fruits">
        <label>
            <input type="checkbox" :value="fruit" v-model="fruitsSelected" :id="fruit">
            {{ fruit }}
        </label>
    </div>
    <p> Selected {{fruitsSelected}}</p>
</div>

    Solution to the particular problem:

    When you leave all the load to checkboxand require all to be selected you can use:

    In Vue, datait's usually a function, but in your case it's an attribute, changing that and simplifying the code a bit for a minimal example:

    new Vue({
    el: '#app',
    data() {
        return {
            totalMensual: {
                "2017": {
                    "8": 8402118,
                    "12": 16805365
                },
                "2018": {
                    "1": 3380427,
                    "2": 3383808,
                    "6": 1450000,
                    "7": 1741365,
                    "8": 11577539,
                    "9": 2588845,
                    "10": 3000000,
                    "12": 14868336
                },
                "2019": {
                    "2": 1594755,
                    "3": 11707602,
                    "5": 9460500,
                    "9": 6080000,
                    "10": 11900000,
                    "11": 18216520,
                    "12": 9779550
                },
                "2020": {
                    "2": 1443190,
                    "3": 44647800,
                    "4": 12288093,
                    "8": 19644587,
                    "11": -342845469,
                    "12": 910439192
                }
            },
            filterLista: [],
        }
    },
    mounted() {
        this.filterLista = Object.entries(this.totalMensual).map(([key, value]) => ({
            [key]: value
        }))
    },
    computed: {
        sortedList() {
            return this.filterLista.sort((a, b) => Object.keys(a)[0] - Object.keys(b)[0])
        }
    }
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
    <div v-for="(meses, ano) in totalMensual">
        <label>
            <input type="checkbox" :value="{[ano]: meses}" v-model="filterLista" :id="ano">
            {{ ano }}
        </label>
    </div>
    {{sortedList}}
</div>

    • 1