Does anyone know how to resolve the issue I'm facing with adding selected items from a dropdown list to a new array and displaying them on the page? Currently, I have added an onblur event to the input field to hide the dropdown when clicked outside, but this has caused a problem where I am unable to select items as they are positioned outside the input area. I attempted to use @click.stop to stop propagation, but unfortunately it did not work. As a result, I am now unable to select items and add them to the selected array.
<template>
<input
type="text"
v-model="input"
placeholder="Search fruits..."
@blur="optionsVisible = false"
@input="optionsVisible = true"
/>
<div
class="item fruit"
v-if="optionsVisible"
v-for="fruit in filteredList()"
:key="fruit"
@click.stop=""
>
<p @click="select">{{ fruit }}</p>
</div>
<div class="item error" v-if="input && !filteredList().length">
<p>No results found!</p>
</div>
<div class="selected">Selected: {{ selected }}</div>
</template>
<script setup>
import { ref } from 'vue';
let input = ref('');
let optionsVisible = ref(false);
let selected = ref([]); // fill this array with selected items from the dropdown
let select = (e) => {
selected.push(e);
};
const fruits = ['apple', 'banana', 'orange'];
function filteredList() {
return fruits.filter((fruit) =>
fruit.toLowerCase().includes(input.value.toLowerCase())
);
}
</script>
I added an onblur event to the input field to hide the dropdown when clicking outside, but now I'm having trouble selecting items that are outside the input area. I tried using @click.stop to prevent propagation, but it didn't work. Now, I'm unable to select items and add them to the selected array.