How to trigger an action by clicking the option item of a select element (Vue.js)?

Question

List of options as JS object:

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 element:

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

Right know the console logs never logs.

How to make it so that the analytics.CustomDate options triggers its method?

Hardik Satasiya · Accepted Answer · 2017-12-08 05:14:28Z

I think click event on option will not work, we can utilize its change event, (not sure option element is not respecting onclick)

you can check workaround in this snippet

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>

Collectives™ on Stack Overflow

How to trigger an action by clicking the option item of a select element (Vue.js)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related