template: '<div v-bind:id="id" class="list">\
    <i @click="left" class="left flaticon-left-arrow"></i>\
    <div>{{ values[index] }}</div>\
    <i @click="right" class="right flaticon-arrowhead-pointing-to-the-right"></i></div>',
    props: ['id','num'],
    data: function(){
        return {
            index: 0,
            values: this.num ? [-1,-0.1,-0.2,-0.3,-0.4,-0.5,-0.6,-0.7,-0.8,-0.9,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1] : data[this.id],
        }
    },
    methods: {
        left: function(event){
            this.index--
            if(this.index < 0) this.index=0
            this.send()
        },
        right: function(event){
            this.index++
            if(this.index == this.values.length) this.index=0
            this.send()
        },
        send: function(){
            var value = this.num ? this.values[this.index] : this.index
            //console.log('ChangeCharacterParam:'+this.id+':'+Number(value))
            mp.trigger('ChangeCharacterParam', this.id, Number(value))
        }
    }
});