Apologies for any syntax errors, although the code is functioning perfectly. There may have been a mistake during the copying process.
Situation: I am facing an issue with a component called 'dropdown', which is repeated three times using v-for='(item, index) in search'. The 'search' array contains three objects. While the for loop and if statement within the 'filterInput' method work correctly, I am struggling to pinpoint the specific 'dropdown' element that corresponds to search[i]. My goal is to eliminate the DOM element of search[i] when the text value doesn't match the input.
<div id='app'>
<input type='text' placeholder='Start typing here...' v-model='input'
@click='drop()' v-on:blur='close()'>
<ul id="dropdown" class='nodisplay'>
<dropdown v-for='(item, index) in search' v-bind:item='item' v-
bind:index='index'></dropdown>
</ul>
</div>
Vue.component('dropdown', {
props: ['item', 'index'],
template: `<li><a href="#"> {{item.text}}</a></li>`
})
var app = new Vue({
el: '#app',
data: {
input: '', //reactive
search: [
{id: 1, text: 'Jacob'},
{id: 2, text: 'Jeff'},
{id: 3, text: 'Tom'}
]
},
methods: {
drop: function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle('nodisplay');
},
close: function() {
let dropdown = document.getElementById('dropdown');
dropdown.classList.toggle('nodisplay');
document.querySelector('input').value = '';
},
filterInput: function(index) {
//dropdown items in console: app.search[index].text = 'xyz'
for (let i = 0; i < this.search.length; i++) {
if (!(this.search[i].text.startsWith(this.input))) {
//hide or remove this current search element from dropdown
}
}
}
},
watch: {
input: function() {
this.filterInput();
}
}
})
In summary, I am seeking guidance on how to target