javascript - 从选定的下拉列表中获取值 Vue Js

Question

我有一个问题，我真的很困惑如何从表单绑定(bind) vue js 中获取值。我已经尝试过 --> https://v2.vuejs.org/v2/guide/forms.html#Select 。但我总是收到错误，例如 --> “选定的”属性或方法未在实例上定义，而是在渲染期间引用。确保在数据选项中声明响应式(Reactive)数据属性。我的代码有什么问题吗？

这是我的代码:

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);
  }
}

这是我的 html 代码:

<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

方法不能以这种方式使用，并且您实际上根本不需要任何方法来获取值。这是一个有效的示例:

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>