V-on：单击范围滑块值的更改索引

Question

最近开始学习VueJS。我有点卡住，我不知道如何在点击时动态更改范围滑块的索引。我正在使用freemarker。这是一个vuejs代码：

  Symbol       Date           Value   
     A            2017-01-06     10
     B            2017-01-09     11
     C            2017-01-10     10   
     E            2017-01-12     12 
     F            2017-01-13     14

这是html输出：

<script>
        var rangeSlider = [<#list subtopics as subtopic>'${subtopic}',</#list>];
        for (var i = 0; i < rangeSlider.length; i++) {
            if (rangeSlider[i] == 0) {
                rangeSlider.splice(i,1);
                i--;
            }
        }
        test(rangeSlider);
        function test(val) {
            new Vue({
                el: '.range__slider',
                data() {
                    return {
                        value: 0,
                        data: val,
                        options: {
                            eventType: 'auto',
                            width: 280,
                            height: 10,
                            dotSize: 20,
                            max: 6,
                            interval: 1,
                            show: true,
                            speed: 0.3,
                            disabled: false,
                            piecewiseLabel: true,
                            tooltip: false,
                            reverse: false,
                            clickable: true,
                            realTime: false,
                            lazy: true,
                        }
                    }
                },
                methods: {
                 **//this was an attempt to change index**
                    updateInfo(){ 
                        for(var m = 1; m < 7; m++) {
                            console.log(m);
                            // return m;
                        }
                    },
                    log (v) {
                        console.log(v)
                    }
                },
                mounted() {
                },
                components: {
                    'vueSlider': window['vue-slider-component'],
                }
            })
        }
    </script>

这里我想动态更改索引（此代码位于vue滑块下方）：

        <div class="slider__div">
        <vue-slider ref="slider" v-model="value" v-bind="options" :data="data" @click="updateInfo()">
        </vue-slider>
        </div>

一切都坐在range__slider类之内。我希望我能清楚地解释。先感谢您！抱歉，无法将此代码放入jsfiddle中的freemarker原因。