如何使用 vue.js 獲取所選選項的索引

Question

對不起，新手問題。 但是如何從選擇框中獲取所選元素的索引並運行函數。 我下面的代碼不會觸發 switchView() 函數。

<select id="selectbox" @change="switchView(index)">
  <option [v-for="(item, index) in items" v-bind:value="item.title"]>
    {{ item.title }}
  </option>
</select>

任何幫助將不勝感激。

編輯：將@change="switchView(index)"從<option>到<select> ，感謝@Phil

我需要索引，因為我有幾個計算項目。 我需要根據用戶從項目中的選擇來更改視圖。

Answer 1

將$event.target.selectedIndex傳遞給您的函數

使用@change指令來監聽change 事件。 調用你的函數並通過$event或事件目標的選定索引$event.target.selectedIndex作為參數傳遞給你的函數。

<select @change="switchView($event, $event.target.selectedIndex)">

您的方法接收傳遞的參數。

methods: {
    switchView: function(event, selectedIndex) {
      console.log(event, selectedIndex);
    }
  }

完整示例https://jsfiddle.net/3p7rhjyw/

<div id="app">
  <select @change="switchView($event, $event.target.selectedIndex)">
  <option v-for="(item, index) in items" v-bind:value="item.title">
    {{ item.title }}
  </option>
</select> 
<p>
{{ selectedIndex }} {{ items[selectedIndex].id }}
</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Learn JavaScript", id: 'A' },
      { title: "Learn Vue", id: 'B' },      
      { title: "Play around in JSFiddle", id: 'C' },
      { title: "Build something awesome", id: 'D' }
    ],
    selectedIndex: 0
  },
  methods: {
    switchView: function(event, selectedIndex) {
      console.log(event, selectedIndex);      
      this.selectedIndex = selectedIndex;
    }
  }
});
</script>

關於HTMLSelectElement.selectedIndex 的Mozilla 文檔。

Answer 2

您可以在select元素上使用@change並在indexOf函數的幫助下獲取索引。 這是工作演示。

見代碼：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        age: '',
        selectedIndex: '',
        options: [1,2,3,44,55]
      };
    },
    methods: {
      selected: function () {
         this.selectedIndex = this.options.indexOf(this.age)
         alert('this is selected Index ' + this.selectedIndex)
       }
    }   
})

Answer 3

對於預先修改的 bootstrap-vue，此事件處理可能與$event.target.selectedIndex不同。 特別是對於 Vue 3，這個答案可能會節省您的時間。

<b-form-select @change="onChange" :options="options"></b-form-select>

從用戶選擇接收事件的方法。

  methods: {
    onChange: function(event) {
      let index = event.target.selectedIndex
    }
  }

完整示例可能如下所示：

<div id="app">
  <select @change="onChange">
  </select> 
  <p>Selected index: {{ selectedIndex }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    items: [
      "option 1",
      "option 2",
      "option 3",
      "option 4"
    ],
    selectedIndex: 0
  },
  methods: {
     onChange: function(event) {
       let index = event.target.selectedIndex // this selectedIndex is from event.
       this.selectedIndex = index
     }
  }
});
</script>