Seeking help with implementing a filter search feature for my Tagging Tool Component that has 3 different levels of priority. Is it possible to access tags[n] in the computed function tagsFilter?
Check out the current version: https://jsfiddle.net/hej7L1jy/26/
I want to replace v-for="tag in tags[n]" with: v-for="tag in tagsFilter". Currently, I'm encountering a TypeError: this.tags.filter is not a function
Open to suggestions and ideas!
Vue.js Template:
<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>
Vue.js component:
new Vue({
el: '#app',
props: {
selectedTags: {
type: Array
}
},
data() {
return {
prios: [ 1, 2, 3 ],
tagSelected: [],
tags: [],
textSearch: ''
}
},
computed: {
tagsFilter: function() {
var textSearch = this.textSearch;
return this.tags.filter(function(el) {
return el.title.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
});
}
},
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"}]};
}
});