vue element ui el-slider 动态设置v-model

Question

 <div class="content" style="display: block;">
    <div class="block" v-for="(item,index) in yearRanking">
        <span><p class="newtip newtip_top">NO1</p></span>
        <span class="demonstration_name">{{item.NAME}}</span>
        <span class="demonstration_value">{{item.VALUE}}分</span>
        <el-slider v-model="yearRanking[index].VALUE" :show-tooltip="false" disabled></el-slider>
    </div>
</div>
data: function () {
        return {
            yearRanking:[
                {
                    NAME:'龙源电力',
                    VALUE:'30',
                    value:"30"
                },
                {
                    NAME:'龙源电力',
                    VALUE:'50',
                    value:"50"
                },
                {
                    NAME:'龙源电力',
                    VALUE:'80',
                    value:"80"
                },
            ],
            value5:80,
        }
    },

怎样把v-model值设置成动态的，取yearRanking里的VALUE值，如上我的代码这样写为什么没有生效，，，，，求解？？？

Answer 1

<el-slider :value="yearRanking[index].value | rankValue" :show-tooltip="false" disabled></el-slider>

filters: {
    rankValue: (val) => {
      return Number(val);
    }
}

Answer 2

你这样写，控制台没报警告吗，类型是number的，
下边这里可以这样写，不用index去取值

<el-slider v-model="item.VALUE" :show-tooltip="false" disabled></el-slider>