CODEWITHSUNDEEP
htmlvuejs2
subham nayak
subham nayak

Reputation: 25

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

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

Upvotes: 0

Views: 668

Answers (1)

wittgenstein
wittgenstein

Reputation: 4462

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>

Upvotes: 2

Related Questions