display data set based on string content using vuejs - vue.js

Question

I want to display the designated data that is found for a particular code match. I have a data set that will come in model. I want if the data-set, subject property has the first 2-3 characters found in it, to display the corresponding name. Based on the first 3 characters begins with LA_, which is found in the first index, only the first set of content should appear (Name: Library Arts Department: ACSF-LA Identifier: 6774). I know i would need to slice the character off, with string slice, but what if sometimes the name has like LAX_ (SO I want to be sure to check if the subjects have any that match--). So basically to check everything before the first "_"
new Vue({
el: "#app",
data: {
Name:"LA_123_cc",
todos: [{"Name":"Library Arts","Identifier":"6774","Code":"AACSF-LA","Subjects":["LA_","AEL","APC","GAP","FAC","GLM","GS","MPT","PRO","WNM"]},
{"Name":"Violin Dance","Identifier":"6169","Code":"Avvv-VA","Subjects":["VA","VL","VPC","AAP","YAC","XLM","GXS","XPT","IRO","CNM"]}
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Name: {{Name}}</h2>
<ol>
<li v-for="todo in todos">
Name: {{todo.Name}} <br>
Department: {{todo.Code}}<br>
Identifier: {{todo.Identifier}}
</li>
</ol>
</div>

Answer 1

Create a computed property that uses Array.prototype.filter on the todos[]. The callback to filter() receives each array item, and returns true if the item should be in the result. In this callback, you can check if each item contains the leading characters (before the underscore) in the search string (LA in your example):
export default {
computed: {
computedTodos() {
const searchLetters = this.Name.split('_')[0].split('') /* get characters of first part of string before underscore */
.filter(x => /\w/.test(x)) /* keep only letters */
return this.todos.filter(item => {
/* check if each letter appears in order within the item's name */
let i = 0
return searchLetters.every(letter => {
i = item.Name.indexOf(letter, i)
return i > -1
})
})
}
}
}
Then update the template to use the computed prop instead of todos[]:
<!-- <li v-for="todo in todos"> -->
<li v-for="todo in computedTodos">
new Vue({
el: "#app",
data: {
Name:"LA_123_cc",
todos: [{"Name":"Library Arts","Identifier":"6774","Code":"AACSF-LA","Subjects":["LA_","AEL","APC","GAP","FAC","GLM","GS","MPT","PRO","WNM"]},
{"Name":"Violin Dance","Identifier":"6169","Code":"Avvv-VA","Subjects":["VA","VL","VPC","AAP","YAC","XLM","GXS","XPT","IRO","CNM"]}
]
},
computed: {
computedTodos() {
const searchLetters = this.Name.split('_')[0].split('').filter(x => /\w/.test(x))
return this.todos.filter(item => {
let i = 0
return searchLetters.every(letter => {
i = item.Name.indexOf(letter, i)
return i > -1
})
})
}
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="Name">
<h2>Name: {{Name}}</h2>
<ol>
<li v-for="todo in computedTodos">
Name: {{todo.Name}} <br>
Department: {{todo.Code}}<br>
Identifier: {{todo.Identifier}}
</li>
</ol>
</div>