Javascript Vue.js过滤计算函数中的多维数组

我有一个标记工具组件，具有3种不同的优先级。现在我想要一个过滤器搜索。是否可以在computed

tagsFilter

功能中访问标签[n]

这是我当前的版本：

我想将

v-for=“tags in tags[n]”

替换为：

v-for=“tags in tags过滤器”

在我收到

类型错误的那一刻：this.tags.filter不是一个函数

有人有主意吗

Vue.js模板：

<div id="app">
  <input id="input-search" type="text" class="form-inline pull-right" v-model="textSearch" placeholder='Search...'>
  <div v-for="n in prios">
  <h3>{{n}} tag priority</h3>
    <ul v-if="tagsFilter && tagsFilter.length">
      <li :class="'tagPriority-'+n" v-for="tag in tagsFilter">
        <label class="checkbox-inline"><input name="tags[]" type="checkbox" v-model="tagSelected" :value="tag.id"> {{tag.title}}</label>
      </li>
    </ul>
  </div>
</div>

---

尽管您在

数据中定义了
标记
：

data() {
    return {
        tags: [],
    }
},

您创建的
回调覆盖了此。标记
：

created: function () {
    this.tagSelected = this.selectedTags;
    this.tags = {"1":[{"id":9,"title":"Auto"}],"2":[{"id":8,"title":"Elektroauto"}],"3":[{"id":10,"title":"BMW i3"},{"id":11,"title":"Opel Ampera"},{"id":12,"title":"Renault TWIZY"}]};       
}

将其转换为没有
过滤器
方法的对象

使用计算属性进行过滤
您的模板：

<li :class="'tagPriority-'+n" v-for="tag in tags[0]">

<li :class="'tagPriority-'+n" v-for="tag in tags[0]">

变成：

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        var filteredTags = {};
        var tags = this.tags;
        Object.keys(this.tags).forEach(function(key) {
            filteredTags[key] = tags[key].filter(function(el) {
                return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
            });
        });
        return filteredTags;
    },
},

methods: {
    tagsFilter: function(i) {
        var textSearch = this.textSearch;
        return this.tags[i].filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    },
},

基本上，我们正在迭代每个
this.tags
属性，并将每个属性的过滤版本添加到
filteredTags





使用一种方法进行过滤
另一种方法（更改的代码量最少）是将
计算的
更改为带有参数的方法：

变成：

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        var filteredTags = {};
        var tags = this.tags;
        Object.keys(this.tags).forEach(function(key) {
            filteredTags[key] = tags[key].filter(function(el) {
                return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
            });
        });
        return filteredTags;
    },
},

methods: {
    tagsFilter: function(i) {
        var textSearch = this.textSearch;
        return this.tags[i].filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    },
},

.
是的，我的组件稍微大一点。。。我改变了我的小提琴示例：@hasentopf好的！我添加了两种可能的解决方案。它们适用于两种版本的小提琴。谢谢@acdcjunior！计算属性解决方案工作得很好，因为标记是通过Axios.get（）来的
<li :class="'tagPriority-'+n" v-for="tag in tagsFilter(n)">

computed: {
    tagsFilter: function() {
        var textSearch = this.textSearch;
        return this.tags.filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    }
},

methods: {
    tagsFilter: function(i) {
        var textSearch = this.textSearch;
        return this.tags[i].filter(function(el) {
            return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    },
},