如何在 vuejs 中获取选择选项名称属性 [英] How to get select option name attribute in vuejs
本文介绍了如何在 vuejs 中获取选择选项名称属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在 vuejs 中获得一个选择选项名称属性.我试着用它来评估属性.它运作良好.我在下面提到了尝试过的代码.
试过的代码:
我想知道我该怎么做.谢谢.
解决方案
event.target.name 实际上返回的是selectname属性> 元素而不是所选的 option.要获取所选 option 的 name 属性，您可以使用 getAttribute() 方法改为:
var app = new Vue({el: '#app',方法: {onChange:函数(){var 选项 = event.target.options如果(options.selectedIndex > -1){var name = options[options.selectedIndex].getAttribute('name');控制台日志(名称)}}},});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><div id="应用程序"><select id="countryselect" name="country" @change="onChange()"><option value="0">---选择---</option><option value="1" name="0">阿富汗</option><option value="2" name="0">阿尔巴尼亚</option><option value="3" name="0">阿尔及利亚</option><option value="4" name="1">马来西亚</option><option value="5" name="0">马尔代夫</option></选择>I want to get a select option name attribute in vuejs. I tried it to value attributes. It worked well. I have mentioned the tried code below.
Tried code:
<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;
}
},
});
I want to know how can I do this. Thank you.
解决方案
event.target.name actually returns the name attribute of the select element instead of the selected option. To get the name attribute of the selected option you can use getAttribute() method instead like:
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>
这篇关于如何在 vuejs 中获取选择选项名称属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
