How to display the selected value from api in a dropdown selection tag VUEJS

Question

I want to display a dropdown select with auto selected value that comes from the api.

Currently my code:

                <select
                    class="form-control"
                    v-model="tutorial.store"
                  >
                    <option
                      required
                      :value="store.id"
                      v-for="store in stores"
                      :key="store.id"
                      >{{ store.name }}</option
                    >
                  </select>

It doesn't show anything but, the values that comes from api is Store 1

Please help

use axios to make your api call then use wittgenstein answer to display the data — Christophe Chenel
– Christophe Chenel, Commented Mar 16, 2021 at 18:42

tony19 · Accepted Answer · 2022-07-15 23:51:33Z

2

to achieve the result you can use the two-way-data-binding.

You have to fill what you want as prefilled value in the reactive variable in data. In the example here it is: selected: 'three' . selected is a two-way-binded variable that is connected to the selection field and is automatically filled. You can read here more about the input binding

new Vue({
  el: '#app',
  data: {
    stores: [
      {name: 'one'},
      {name: 'two'},
      {name: 'three'}
    ],
    selected: 'three' // init value
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id='app'>
  <select v-model="selected">
   <option
    :value="store.name"
    v-for="store in stores"
    :key="store.id"
    >
    {{ store.name }}
    </option>
  </select>
  <p>selected: {{ selected }}</p>
</div>

edited Jul 15, 2022 at 23:51

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 16, 2021 at 18:39

wittgenstein

4,60011 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display the selected value from api in a dropdown selection tag VUEJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related