vuejs what is the easiest way to display the value of the selected item in the drop down. I am alrea-CodePudding

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" >
                    <option value=''></option>
                    <option value='Act'>test1</option>
                    <option value='Advertising'>My AD</option>
              
                </select>
</div>

CodePudding user response：

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>