Vue Select Change詳解

一、基礎應用

在Vue中，select元素有一個非常重要的事件：change事件。當用戶選擇不同的選項時，該事件將被觸發。 我們可以使用v-on指令來捕獲該事件。

<select v-model="selected" v-on:change="handleChange">
  <option disabled value="">請選擇</option>
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      { text: '中國', value: 'China' },
      { text: '美國', value: 'USA' },
      { text: '德國', value: 'Germany' }
    ]
  },
  methods: {
    handleChange: function(event) {
      console.log(event.target.value);
    }
  }
})
</script>

在上述代碼中，我們定義了一個Vue實例，並使用v-model指令將select元素和selected屬性綁定在一起。selected屬性用於存儲用戶選擇的選項的值。當用戶進行了選擇時，我們定義了一個名為’HanldeChange’的方法，並使用v-on指令將其與change事件綁定在一起。該方法將接收一個event對象作為參數，我們可以從中訪問target屬性來獲得用戶選擇的選項的值。

二、通過計算屬性實時更新

我們可以使用計算屬性來實時更新select元素的選項列表，這在某些情況下非常有用。

<select v-model="selected">
  <option disabled value="">請選擇</option>
  <option v-for="option in optionsWithAddition" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      { text: '中國', value: 'China' },
      { text: '美國', value: 'USA' }
    ],
    additionalOption: {
      text: '德國',
      value: 'Germany'
    }
  },
  computed: {
    optionsWithAddition: function() {
      return this.options.concat(this.additionalOption);
    }
  }
})
</script>

在上述代碼中，我們定義了一個名為options的屬性，其中包含兩個選項的列表，並定義了一個additionalOption屬性，其中包含一個額外的選項。我們使用計算屬性optionsWithAddition將options和additionalOption組合在一起，並使用v-for指令替換select元素的選項。當添加一個新選項時，optionsWithAddition將自動更新。

三、組件應用

在Vue中，我們可以創建一個選擇器組件，讓其可以在應用程序的多個地方使用。

<template id="custom-select-template">
  <div>
    <select v-model="selected">
      <option disabled value="">請選擇</option>
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div>
</template>

<script>
Vue.component('custom-select', {
  template: '#custom-select-template',
  props: {
    options: Array
  },
  data: function() {
    return {
      selected: ''
    }
  }
});

new Vue({
  el: '#app',
  data: {
    options: [
      { text: '中國', value: 'China' },
      { text: '美國', value: 'USA' }
    ]
  }
});
</script>

在上述代碼中，我們使用Vue.component()方法創建了一個名為custom-select的選擇器組件，它使用從外部傳遞的選項列表作為props屬性，並在內部管理所選選項的狀態。組件只包含HTML，其JavaScript邏輯在Vue實例中管理。我們可以使用組件的方式調用該組建。

<div id="app">
  <custom-select v-bind:options="options"></custom-select>
</div>