select要素（Vue.js）のオプション項目をクリックしてアクションをトリガーする方法は？ JSオブジェクトとしてオプションの

一覧：select要素（Vue.js）のオプション項目をクリックしてアクションをトリガーする方法は？ 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オプションは、そのメソッドをトリガーするようにそれを作るには？

出典

2017-12-08 alex

私はあなたがこのスニペット

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>

に回避策を確認することができますオプションのイベントは動作しません]をクリックし、我々はその変更イベント、（オプション要素はonclickの尊重されていないことを確認しない）

を利用することができると思います

出典

2017-12-08 05:14:28

select要素（Vue.js）のオプション項目をクリックしてアクションをトリガーする方法は？ JSオブジェクトとしてオプションの

答えて

関連する問題