I need to incorporate a button that can extract the id of the selected list of restaurants so that I can pass the id to my API request when the button is clicked. Unfortunately, I am facing difficulty in adding the button inside the select element as it disappears, and I am unable to access the id outside the option loop.
<div id="selectedList" class="addFavoriteRestaurantToList">
<select name="list_id" @change="onChange($event)" class="form-control">
<option>--- Select a fav list ---</option>
<option :key="listresto.id" v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
</select>
<button class="removeButton" @click="AddFavoriteRestaurant( listresto.id, restaurantData.id)"> Add "{{restaurantData.name}}" to your your favorite list</button>
</div>
method used to return what i selected in dropbox (works but since i cant use anything on my button, im stuck) :
onChange(event) {
return event.target.value;
}
My goal is to extract the id of the selected list in order to utilize it in my button functionality.