在 vue.js 中获取选定的下拉值

Question

我正在尝试在我的方法中获取 vue.js 中选定的下拉值，但我不希望它出现在更改事件中。

 this.e.target.options[e.target.options.selectedIndex].dataset;

这正在处理更改事件，但我想像使用 jQuery 一样通过类或名称直接访问它：

$('.dropdownclass').find(':selected').attr('data-id')

Answer 1

这就是 vue 下拉菜单的样子：

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 1, text: 'Please select an option' },
          { value: 2, text: 'This is First option' },
          { value: 3, text: 'Selected Option' }
        ]
      }
    }
  }
</script>

您还可以像这样将ref 属性添加到您的下拉列表中：

<b-form-select ref="myDropdown" :options="options"></b-form-select>

然后在脚本中类似这样的东西应该可以工作：

this.$refs.myDropdown.value

$refs 等效于 jquery 选择器。 ref 是组件范围 id。