如何通过单击选择元素（Vue.js）的选项项来触发操作？

debugcn 发表于 Dev

亚历克斯

作为 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选项触发其方法？

哈迪克·萨塔西亚

我认为选项上的点击事件不起作用，我们可以利用它的更改事件，（不确定选项元素是否不尊重 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。