Get Value From Selected Dropdown Vue Js

Question

I have a problem, I really confused about how to get value from form binding vue js. I have tried --> https://v2.vuejs.org/v2/guide/forms.html#Select. But I always getting error such as --> Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. What's wrong with my code ?

Here is my 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 is my 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>

Answer 1

The methods is not to be used this way, and you don't actually need any methods at all to get the value. Here's a working example:

const app = new Vue({
  el: '#app',
  data: {
    selectedOption: undefined,
    chosenColor: 'transparent',
    colorMappings: {
      ID: 'red',
      Title: 'green',
      Category: 'blue',
      'Nama User': 'orange'
    },
    widthMappings: {
      ID: '2px',
      Title: '4px',
      Category: '6px',
      'Nama User': '8px'
    },
    types: [
      {
        "id": "id",
        "value": "ID"
      },
      {
        "id": "title",
        "value": "Title"
      },
      {
        "id": "category",
        "value": "Category"
      },
      {
        "id": "username",
        "value": "Nama User"
      }
    ]
  },
  watch: {
    selectedOption(newVal) {
       this.chosenColor = this.colorMappings[newVal]
    }
  },
  computed: {
    chosenWidth() {
      return this.widthMappings[this.selectedOption] || '1px'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <select v-model="selectedOption">
    <option disabled value="">Please select one</option>
    <option v-for="type in types" v-bind:value="type.value">{{type.value}}</option>
  </select>
  <span v-bind:style="{ 'background-color': chosenColor, 'border': 'solid ' + chosenWidth + ' black' }">Selected: {{ selectedOption }}</span>
</div>

Answer 2

@kevlai22 already gave you a runnable code snippet, I'd like to tell you why you got the warning message Property or method "selected" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option..
It's simply because you return your data object with a nested data object, so v-model="selected" won't work but v-model="data.selected" will. Actually you don't need to return a nested object but just use code like this.

data: function() {
  return {
      options: [],
      selected: ''
  };
},

Check the working demo.