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

Question

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

试过的代码：

<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;
    }
  },
});

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

Answer 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>