<div id="app">
<h2>Language Search</h2>
<div class="form-group">
<input
type="text"
v-model="input"
placeholder="Enter language"
class="form-control"
/>
</div>
<ul v-for="(item, index) in filteredList" class="list-group">
<li class="list-group-item" :key="item">{{ item }}</li>
</ul>
</div>
new Vue({
el: "#app",
data() {
return {
input: "",
languages: [
"JavaScript",
"Ruby",
"Scala",
"Python",
"Java",
"Kotlin",
"Elixir"
]
};
},
computed: {
filteredList() {
return this.languages.filter(item =>
item.toLowerCase().includes(this.input.toLowerCase())
);
}
}
});
