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

Posted 2023-02-23

【中文标题】在 vue.js 中获取选定的下拉值

【英文标题】：Get selected dropdown value in vue.js

【发布时间】：2021-02-04 04:12:08

【问题描述】：

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

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

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

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

【问题讨论】：

你确定你在使用 vue 吗？

Did you look at the docs?

@ulou：我正在使用vue，我想知道是否有办法直接在方法中获取数据属性，

【参考方案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。

【讨论】：

感谢您的回答，您能告诉我如何获取选定的索引 data-id，因为我想要数据 id 而不是值。

this.$refs.myDropdown.dataId 应该可以工作，如果不是console.log(this.$refs.myDropdown)，那么您应该在浏览器控制台中看到myDropdown 的所有可能属性。如果您将在 v-for 中使用相同的 ref 名称，this.$refs 也可能是一个数组。