Question

74

Vue.js dynamic dropdown

rated 0 times [ 77] [ 3] / answers: 1 / hits: 22764 / 7 Years ago, mon, april 3, 2017, 12:00:00

How would I make a dynamic dropdown in vue, not sure what I am doing wrong.

in my html I have...

<div id=app>

     <select v-model=selected>

             <option disabled value=>Please select one</option>

             <option v-for=item in selected></option>

     </select>

and my js looks like....

new Vue({

        el: '#app',

        data: {

          selected: [Apache, Cochise],

        }

      })

filters looks like this

EDIT:
the values appear in the html DOM tree in the inspector

but not in the dropdown

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ansleyk

Add To Favorites

Follow

Total Points: 42

Total Questions: 100

Total Answers: 83

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

ansleyk questions

1 How do I get uploaded image in next js and save it?

Fri, Jun 17, 22, 00:00, 2 Years ago

1 How can I send secure API requests from SvelteKit app, without showing API keys on the client side?

Mon, May 17, 21, 00:00, 3 Years ago

1 MUI Select component with custom children item

Sun, Apr 4, 21, 00:00, 3 Years ago

1 How to remove border of Material UI's DatePicker?

Wed, Mar 10, 21, 00:00, 3 Years ago

1 Qr & Barcode Reader javascript documentation for html5

Wed, Dec 16, 20, 00:00, 4 Years ago

View All

answered 7 Years ago brandensebastiand · Accepted Answer

Try this.

new Vue({

    el: '#app',

    data: {

        filters: filters,

        selectedValue: null

    }

})



<div id="app">

     <select v-model="selectedValue">

         <option disabled value="">Please select one</option>

         <option v-for="item in filters" :value="item">{{item}}</option>

     </select>

</div>

Example.

Note: For future readers, there was also an issue where the normal delimiters for text interpolation needed to be customized in @captnvitman's evnironment.