时间戳

首页 > 解决方案 > Vue.js选择下拉选项选中属性问题

javascript - Vue.js选择下拉选项选中属性问题

问题描述

我有以下代码用于 html 中的选择下拉列表：

<select class="form-select" name="" id="" v-model="rp">
<option v-for="(educationGroup,index) in educationGroupList" :key="index" :value='educationGroup.id' :v-if="educationGroup.id == 2" selected>{{ educationGroup.name }}</option>
</select>

我的问题是如何在 vue.js 中设置选定的属性。在我的代码中“选定”代码不起作用。

标签： javascriptvue.js

解决方案

您可以尝试使用 @change 调用更改事件

  <select class="form-select" name="" id="" v-model="rp" @change="onChange()">
    <option v-for="(educationGroup,index) in educationGroupList" :key="index" :value='educationGroup.id' :v-if="educationGroup.id == 2" selected>{{ educationGroup.name }}</option>
</select>

然后在方法中调用 onChange 函数来获取选定的值，如下所示：

export default {

    methods: {
    onChange: function() {
      var options = event.target.options
      if (options.selectedIndex > -1) {
        var value= options[options.selectedIndex].getAttribute('value');
        console.log(value)
      }
    }
  },
}

推荐阅读