javascript - Get Value From Selected Dropdown Vue Js -

i have problem, confused how value form binding vue js. have tried --> https://vuejs.org/v2/guide/forms.html#select. getting error such --> property or method "selected" not defined on instance referenced during render. make sure declare reactive data properties in data option. what's wrong code ?

here code :

data: function() {   return {     data: {       options: {},       selected: ''     }   }; }, methods: {   search: function() {     var vm = this;      var types = [       {         "id": "id",         "value": "id"       },       {         "id": "title",         "value": "title"       },       {         "id": "category",         "value": "category"       },       {         "id": "username",         "value": "nama user"       }     ];      vm.data.options = types;      console.log(vm.data.selected);   } } 

here html code :

<select v-model="selected" class="form-control sl">     <option v-for="option in data.options" v-bind:value="option.id">         {{ option.value }}     </option> </select> 

sorry, misread post slightly, ignore data part. didn't realise created data object within data. below sample of code should closely match yours. problem here when clicking on button, add new elements search drop-down, haven't selected yet, console output empty string. if select , click button again, value.

vue.component('select-component', {  	template: '<div>\    <select v-model="data.selected" class="form-control sl">\      <option v-for="option in data.options" v-bind:value="option.id">\        {{ option.value }}\      </option>\    </select>\    <button v-on:click="search">populate list</button>\  </div>',    data: function() {      return {        data: {          options: {},          selected: ''        }      };    },    methods: {      search: function() {        var vm = this;          var types = [          {            "id": "id",            "value": "id"          },          {            "id": "title",            "value": "title"          },          {            "id": "category",            "value": "category"          },          {            "id": "username",            "value": "nama user"          }        ];          vm.data.options = types;  			        console.log(vm.data.selected);      }    }  });    var vm = new vue({  	el: '#app'  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>  <div id="app">    <select-component></select-component>  </div>

just note, changed v-model="selected" v-model="data.selected" selected variable property of data object variable have made available @ scope.