Javascript Vuejs模板未更新将筛选器应用于属性

我有一个简单的模板，可以迭代某些项目：

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

cards是通过ajax请求获得的原始数据，而filteredCards是我实际迭代的内容

当我使用过滤器进行任何类型的更新时，问题就出现了——模板没有反映过滤后的数组。下面是我如何筛选的：

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

在devtools中，我可以看到数组已被更新为仅一个项目-但是模板从未更新，并保留所有显示的结果。如果我调用了一些实际上改变了数组的东西，比如reverse，那么模板会很好地更新。是否需要执行某些操作才能在过滤阵列后强制更新

---

我已经更新了一点，以反映使用自定义过滤器的情况。我仍然遇到同样的问题。在devtools中，我看到正在从父实例广播的事件更新filterKey。但模板中没有更新任何内容

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

最初获取数据的代码只是一个简单的ajax调用：

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

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

---

奇怪的是当前的代码——当我在发送不同的键之间来回单击时，当我单击将filterKey设置为空字符串的“all items”时，实际的数组项在我的模板中被反复复制

你所做的完全是倒退

实际上，您希望循环原始数组，但对其应用过滤器

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

---

这应该完全有效。现在，无论何时以任何方式更改数组，都会触发过滤器，并重新呈现列表。

来看看过滤器一直在工作。条件模板有一个问题。我会在另一个问题中问这个问题。

我曾经尝试过使用这样的自定义筛选器，但我一直遇到的问题是，筛选器键需要根据在html链接上单击的内容进行动态更改。类似于updateFeedFilterKey（“Something_test”），其中该筛选键实际上作为筛选依据的条件传入。这没有问题，因为您可以使用这样的筛选器

；只有匹配someFilterElement

和

someFilterElement

才是您定义为变量的内容。然后可以在filter函数中使用它（

Vue.filter（'onlyMatching'，函数（cards，someFilterElement）{

）并相应地进行过滤。您正在尝试的应该可以工作-您应该能够将

this.filteredCards

设置为一个新数组，模板应该反映出这一点。您可以发布更多的组件代码吗？这可能有助于了解ajax调用后如何设置数据，也可能有助于了解过滤数据的完整方法。。。

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

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