javascript - propiedades - vue js componente

La plantilla de Vuejs no se actualiza al aplicar filtro a la propiedad

Question

Tengo una plantilla simple que itera sobre algunos elementos:

<template v-for="card in filteredCards">

Las FilterCards son una propiedad que estoy usando para filtrar algunos resultados al hacer clic en un enlace html simple. En mi componente Vue tengo esto:

data = {
    cards: '''',
    filteredCards: ''''
}

las tarjetas son los datos originales que vienen a través de una solicitud de AJAX - y es en realidad sobre las que estoy iterando.

El problema se presenta cuando realizo cualquier tipo de actualización con un filtro: la plantilla no refleja la matriz filtrada. Así es como estoy filtrando:

this.filteredCards = this.cards.filter(function (item) 
{
    return item.Data.event_type.match(''something_test'');
});

En devtools puedo ver que la matriz se ha actualizado a un solo elemento; sin embargo, la plantilla nunca se actualiza y deja todos los resultados. Si llamo a algo que realmente muta la matriz, pero al revés, la plantilla se actualiza perfectamente. ¿Hay algo que deba hacer para forzar una actualización después de filtrar la matriz?

He actualizado un poco para reflejar el uso de un filtro personalizado. Todavía estoy corriendo en el mismo problema. En devtools, veo que filterKey se está actualizando a partir de un evento emitido desde la instancia principal. Pero nada se está actualizando en la plantilla.

var $data = {
    cards: [],
    filterKey: '''',
    loading: true
};


Vue.component(''cards'', {
    template: ''#card-template'',

    data: function()
    {
        return $data;
    },

    events: {
        ''updateFilterKey'': function(key)
        {
            this.filterKey = key;
        }
    }
});

Vue.filter(''onlyMatching'', function(cards)
{
    var $this = this;

    return cards.filter(function(item)
    {
        return item.Data.event_type.match($this.$data.filterKey);
    });
});

El código que inicialmente obtiene la información es solo una simple llamada ajax:

var getFeed = function($url)
{
    $.get($url, function(response)
    {
        $data.loading = false;
        $data.cards = response;

    }).fail(function()
    {
        $data.loading = false;
    });
};

Lo extraño es con este código actual: cuando hago clic atrás y adelante entre el envío de diferentes claves, los elementos reales de la matriz se duplican en mi plantilla una y otra vez cuando hago clic en "todos los elementos", que establece filterKey en una cadena vacía.

Answer 1

Lo que estás haciendo es absolutamente al revés.

De hecho, desea hacer un bucle en la matriz original pero aplicarle un filtro.

<template v-for="card in cards | filterBy onlyMatching">

Luego, en su código, cree un filtro personalizado :

Vue.filter(''onlyMatching'', function (cards) {
    return infoBlocs.filter(function(item) {
        return item.Data.event_type.match(''something_test'');
    });
})

Esto debería funcionar totalmente. Ahora, cada vez que la matriz se modifique de alguna manera, el filtro se disparará y la lista se volverá a generar.

Answer 2

Venga a descubrir que el filtrado estuvo funcionando todo el tiempo. Hay un problema con las plantillas condicionales. Lo preguntaré en otra pregunta.