作为 JS 对象的选项列表:
options: [{
text: this.$t('analytics.pastDays', { days: 7 }),
value: 7
}, {
text: this.$t('analytics.pastDays', { days: 28 }),
value: 28
}, {
text: this.$t('analytics.pastDays', { days: 360 }),
value: 360
}, {
text: this.$t('analytics.customDate'),
value: 7,
method: () => { console.log('Worked') }
}],
选择元素:
<select
class="i-select"
v-model="value"
@change="onChange($event)">
<option
v-for="option in options"
:value="option.value"
@click.stop.prevent="option.method($event)">
{{ option.text }}
</option>
</select>
正确知道控制台日志永远不会记录。
如何使analytics.CustomDate选项触发其方法？
最佳答案
我认为选项上的点击事件不起作用，我们可以利用它的change事件，(不确定选项元素是否不尊重onclick)
您可以检查此代码段中的解决方法
var yourOptions = [{
text: 'analytics.pastDays',
value: 7,
method: function() { console.log('this one is selected (7).') }
}, {
text: 'analytics.pastDays',
value: 28
}, {
text: 'analytics.pastDays',
value: 360,
method: function() { console.log('this one is selected (360).') }
}, {
text: 'analytics.customDate',
value: 70,
method: function() { console.log('this one is selected (70).') }
}];
var vm = new Vue({
el: '#app',
data: {
options: yourOptions,
value:''
},
mounted: function() {
},
methods: {
onChange: function(value) {
var selected = yourOptions.filter(function(obj) {
return obj.value == value
})
if(selected.length > 0) {
selected.forEach(function(option){ if(option.method) { option.method(); } })
}
}
}
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>VueJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<select
class="i-select"
v-model="value"
@change="onChange(value)">
<option
v-for="option in options"
:value="option.value"
>
{{ option.text }}
</option>
</select>
</div>
</body>
</html>关于javascript - 如何通过单击选择元素的选项项来触发操作(Vue.js)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47707198/