如何通过单击选择元素(Vue.js)的选项来触发操作?

时间:2017-12-08 03:18:22

标签: javascript html vue.js

作为JS对象的选项列表:

[AppDomain]::CurrentDomain.GetAssemblies() | where location -like "C:\WINDOWS\assembly\GAC_MSIL\microsoft.sqlserver.smo*"

选择元素:

$svr = new-object "microsoft.sqlserver.management.smo.server" 'localhost';

知道控制台日志永远不会记录。

如何使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') } }], 选项触发其方法?

1 个答案:

答案 0 :(得分:1)

我认为点击事件选项不起作用,我们可以利用其更改事件,(不确定选项元素不尊重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>