Welcome folks today in this blog post we will be using the vue-select
library to display the selected value from the dropdown
input field in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html
file and copy paste the following code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-Select Example in Browser</title> </head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.0/vue-select.css"> <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.0/vue-select.js"></script> </body> </html> |
As you can see we are including the cdn
of the vue.js and the vue-select
library and now we need to write the html
code which will include the select
field as shown below
1 2 3 4 5 |
<div id="app"> <label>Select a fruit:</label> <v-select v-model="selectedFruit" :options="fruits"></v-select> <p>You selected: {{ selectedFruit.value }}</p> </div> |
As you can see we are having the div
section where we have the v-select
directive and inside it we are passing the v-model
directive to pass the data
that we will be selecting and also the options
as well. And then below that we are printing out the selected
value inside the {{}}
brackets.
Adding the Vue.js Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> Vue.component('v-select', VueSelect.VueSelect); new Vue({ el: '#app', data: { selectedFruit: 'Apple', fruits: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Cherry', value: 'cherry' }, { label: 'Grape', value: 'grape' }, { label: 'Orange', value: 'orange' }, { label: 'Peach', value: 'peach' }, { label: 'Pear', value: 'pear' }, { label: 'Pineapple', value: 'pineapple' }, { label: 'Strawberry', value: 'strawberry' }, { label: 'Watermelon', value: 'watermelon' } ] } }); </script> |
As you can see in the above code we are initializing the vue.js
app we are passing the data
to the select
input field and each option is an object where we have two options which is the label
and the value
.