Question

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

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

filteredCards是我用于通过单击简单的html链接过滤某些结果的属性。在我的Vue组件中，我有这个：

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

卡是通过ajax请求发送的原始数据 - 而过滤卡就是我实际迭代的内容。

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

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

在devtools中，我可以看到数组已更新为仅一个项目 - 但模板永远不会更新并显示所有结果。如果我调用的东西实际上改变了数组，虽然反过来 - 模板更新就好了。为了在过滤数组后强制更新，我需要做些什么吗？

我已经更新了一点以反映使用自定义过滤器。我仍然遇到同样的问题。在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;
    });
};

奇怪的是这个当前代码 - 当我在发送不同的密钥之间来回点击时，当我点击＆＃34;所有项目＆＃34;时，我的模板中一遍又一遍地复制实际的数组项目。它将filterKey设置为空字符串。

Answer 1

你所做的事情绝对是倒退。

您实际上想要循环原始数组，但在其上应用过滤器。

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

然后，在您的代码中，创建一个custom filter：

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

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

Answer 2

快来找出过滤器一直在工作。条件模板存在问题。我会在另一个问题中提出这个问题。

Vuejs模板未更新将过滤器应用于属性

2 个答案: