Vue JS - how can I call may data in my filter function of javascript

Question

En nuestra aplicación, añadí una validación de cada fila que no puedes tener 2 mismos valores de columnas. He terminado con eso, pero estoy teniendo un problema en borrar fila Ejemplo Hay un botón de eliminación en el lado derecho cuando lo hice clic, me da un error Cannot read property ..... hasta que ya está declarado en mis datos Mensaje de error Código de la cola deleteRow(i, e){ var month = this.added_items[i].selected_month.id var chart_of_account_id = this.added_items[i].selected_chart_of_account.id var count = 0 // var duplicate = false this.submitStatus = '' this.duplicate_month = false this.added_items.filter(function( obj ) { console.log(this.submitStatus) if((obj.selected_month.id == month && obj.selected_chart_of_account.id == chart_of_account_id) && obj.id != i){ count++ if(count >= 2) { // this.added_items[i].duplicate_month = true // this.submitStatus = 'ERROR' // this.duplicate_month = true } } return obj.id !== i; }); console.log(this.added_items) e.preventDefault() }, Pregunta: ¿Cómo puedo llamar mis datos dentro de mi función de filtro? porque cuando intenté alguno de estos: este.submitStatus/esto.added_items[i].duplicate_month/this.duplicate_month me da un error

cybermage · Accepted Answer

Puedes acercarte de dos maneras Opción 1: Funciones de flecha this.added_items.filter(( obj ) => { console.log(this.submitStatus) if( ( obj.selected_month.id == month && obj.selected_chart_of_account.id == chart_of_account_id ) && obj.id != i ){ count++ if(count >= 2) { // this.added_items[i].duplicate_month = true // this.submitStatus = 'ERROR' // this.duplicate_month = true } } return obj.id !== i; }); Opción 2: Ajusta esto this.added_items.filter(function( obj ) { console.log(this.submitStatus) if( ( obj.selected_month.id == month && obj.selected_chart_of_account.id == chart_of_account_id ) && obj.id != i ){ count++ if(count >= 2) { // this.added_items[i].duplicate_month = true // this.submitStatus = 'ERROR' // this.duplicate_month = true } } return obj.id !== i; }).bind(this);

Gpt · Answer

En Vue.js, cuando se utiliza una función de filtro en un array, la función de filtro se ejecuta en un contexto diferente al de la instancia de Vue, por lo que la palabra clave this no hace referencia a la instancia de Vue. Para solucionar esto, puedes guardar una referencia al contexto antes de llamar a la función de filtro.

Aquí te muestro cómo puedes hacerlo:

javascript
deleteRow(i, e){
    var month                   = this.added_items[i].selected_month.id
    var chart_of_account_id     = this.added_items[i].selected_chart_of_account.id
    var count                   = 0 
    var vm = this; // Guardar una referencia al contexto de Vue

    this.submitStatus =   '';
    this.duplicate_month =   false;

    this.added_items = this.added_items.filter(function( obj ) {
        console.log(vm.submitStatus); // Usar la referencia al contexto
        if((obj.selected_month.id == month && obj.selected_chart_of_account.id == chart_of_account_id) && obj.id != i){
             count++;
             if(count >= 2)
             {
                // vm.added_items[i].duplicate_month                 =   true
                // vm.submitStatus                                   =   'ERROR'
                // vm.duplicate_month                                =   true
             }
        }
        return obj.id !== i;
    });

    console.log(this.added_items);
    e.preventDefault();
},

Al guardar una referencia al contexto de Vue en la variable vm, puedes acceder a las propiedades y datos de la instancia de Vue dentro de la función de filtro sin ningún error. Espero que esta solución te ayude a resolver tu problema.

Respondida el Dec 22, 2020 a las 07:58 - por Gpt

Gemini · Answer

/TextStyle

Vue JS - how can I call may data in my filter function of javascript

3 Respuestas: