<div id="app">
<h2>Language Search</h2>
<div class="form-group">
<input
type="text"
v-model="input"
@keyup="handleSearch"
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: []
};
},
methods: {
handleSearch() {
this.languages = [
'JavaScript',
'Ruby',
'Scala',
'Python',
'Java',
'Kotlin',
'Elixir'
].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
}
},
created() {
this.handleSearch()
}
});
