Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

257
Visualizações
How to use the selected id of a dropdown in Vue.js in a button outside of option/select tag loop

I am trying to add a button that get the id of the selected list of restaurants so i can pass that id to my API request whenever i click on my button. However, i cannot add my button to the select because it disappear and i seem to be outside of the option loop in order to retrieve the id.

<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;
}

So what i want it to get the id of the selected list to use it on my button.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

<div id="selectedList" class="addFavoriteRestaurantToList">
        <select v-model="list_id" name="list_id" @change="onChange($event)" class="form-control">
              <option>--- Select a fav list ---</option>
              <option :key="listresto.id" :value="listresto.id"  v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
        </select>
       <button class="removeButton" @click="AddFavoriteRestaurant( list_id, restaurantData.id)"> Add "{{restaurantData.name}}" to your your favorite list</button>
</div>

and v-model="list_id" declare list_id in data:({list_id:''})

don't forget line with :value="listresto.id"

<option :key="listresto.id" :value="listresto.id"  v-for="listresto in favoriteRestaurantData"> {{listresto.name}}</option>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda