CODEWITHSUNDEEP
vue.js
Vzupo
Vzupo

Reputation: 1468

vuejs what is the easiest way to display the value of the selected item in the drop down. I am already using v-model in one area

I am using vuejs for a select dropdown. I am already using v-model in one portion of the dropdown. I have a list where I will have different option names, and dont think having v-model in each one is a good idea. I do want to display the "value" of the selection on the screen though.

new Vue({
  el: "#app",
  data: {
   selected:'',
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

{{value}}
   <select v-model="selected" class="hide">
                    <option value=''></option>
                    <option value='Act'>test1</option>
                    <option value='Advertising'>My AD</option>
              
                </select>
</div>

Upvotes: 1

Views: 25

Answers (1)

linusw
linusw

Reputation: 1300

in your code "selected" holds the value of the selected option from dropdown and updates if you select another option. for example if you click "My AD" in dropdown, you see "My AD" in the span below.

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>test1</option>
  <option>My AD</option>
</select>
<span>Selected: {{ selected }}</span>

Upvotes: 1

Related Questions