如何在 vuejs 中获取选择选项名称属性

【问题标题】：How to get select option name attribute in vuejs如何在 vuejs 中获取选择选项名称属性
【发布时间】：2020-06-19 05:17:45
【问题描述】：

我想在 vuejs 中获得一个选择选项名称属性。我试着用它来评估属性。它运作良好。我在下面提到了尝试过的代码。

尝试过的代码：

<select id="countryselect" name="country" @change="onChange()">
  <option value="1" name="0">Afghanistan</option>
  <option value="2" name="0">Albania</option>
  <option value="3" name="0">Algeria</option>
  <option value="4" name="1">Malaysia</option>
  <option value="5" name="0">Maldives</option>
</select>

var app = new Vue({
  el: '#app',
  methods: {
    onChange: function() {
      //this workes well
      var b = event.target.value;
      // this not workes
      var c = event.target.name;
    }
  },
});

我想知道我该怎么做。谢谢。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

event.target.name 实际上返回select 元素的name 属性，而不是选定的option。要获取所选option 的name 属性，您可以使用getAttribute() 方法，例如：

var app = new Vue({
  el: '#app',
  methods: {
    onChange: function() {
      var options = event.target.options
      if (options.selectedIndex > -1) {
        var name = options[options.selectedIndex].getAttribute('name');
        console.log(name)
      }
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select id="countryselect" name="country" @change="onChange()">
    <option value="0">---Select---</option>
    <option value="1" name="0">Afghanistan</option>
    <option value="2" name="0">Albania</option>
    <option value="3" name="0">Algeria</option>
    <option value="4" name="1">Malaysia</option>
    <option value="5" name="0">Maldives</option>
  </select>
</div>

【讨论】：