<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 languages" class="list-group">
<li class="list-group-item" :key="item">{{ item }}</li>
</ul>
</div>
new Vue({
el: "#app",
data() {
return {
input: '',
languages: []
}
},
watch: {
input: {
handler() {
this.languages = [
'JavaScript',
'Ruby',
'Scala',
'Python',
'Java',
'Kotlin',
'Elixir'
].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
},
immediate: true
}
}
})
