javascript - vue.js 滑动条如何更改值

Question

我是 vue.js 新手。我尝试创建一个具有最小值和最大值的滑动条。

我找到了一些并安装了 vue range slider。我实现了它，并且成功了。

问题是，当我尝试更改 slider 上的值时。我从 api 请求中获取了一些值，这是一个数组:[400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000,]。但我在幻灯片中的最大值必须是数字，而不是数组。

我试图在文档中查找信息，了解如何更改此最大值，但什么也没找到:/我的滑动条看起来像这样 https://frncsdrk.github.io/vue-slide-bar-demo-page/ 。

我想将值更改为数组中给出的值。

HTML
         .box_slider 
                  VueSlideBar(v-model="value"
                  :min="0"
                  :max="sliderAmount" //this is my value
                  :processStyle="slider.processStyle"
                  :lineHeight="slider.lineHeight"
                  :tooltipStyles="{ backgroundColor: 'red', borderColor: 
                  'red' }"
                  class="demo-demo" id="slider-1")

 VUE.JS
      <script>
      import co from "@/util/co.js";
      import VueSlideBar from "vue-slide-bar";
       var sliderAmount;
     export default {
       name: "Repaid",
     components: {
      VueSlideBar
         },
        data() {
         return {
       slider: {
         lineHeight: 10
            },
            sliderAmount: undefined
         };
          },
        methods: {},
      mounted() {
          co.getLoanPriceList().then(data => {
          let dataLoan = data.data;
            console.log(dataLoan);
        this.sliderAmount = dataLoan.amounts;
         return this.sliderAmount;
          });
         },
         computed: {
           sliderAmountMap() {
          const sliderAmountValue = this.sliderAmount;
                 return sliderAmountValue; //this is my value
         console.log(sliderAmountValue);
           }
       }
        };
         </script>

也许有人做了这种 slider ，可以帮助我开始使用。

编辑

感谢大家的宝贵时间和建议。解决方案是在组件VueSlideBar中添加slider.data，并在data中创建带有数组的var data。

HTML

     .box_slider {{sliderAmountMap}}
                  VueSlideBar(v-model="value"
                  :min="0"
                  :data="slider.data"
                  :max="sliderAmount"
                  :processStyle="slider.processStyle"
                  :lineHeight="slider.lineHeight"
                  :tooltipStyles="{ backgroundColor: 'red', borderColor: 
                   'red' }"
                  class="demo-demo" id="slider-1")

VUE.JS

 export default {
   name: "Repaid",
    components: {
     VueSlideBar
   },
     data() {
      return {
       slider: {
       lineHeight: 10,
       data: [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 
       3000]
       },
       sliderAmount: undefined
      };
     },

Answer 1

循环遍历该数组并将每个值分配给 slider 的 max 属性:

     .box_slider (v-for="(item,index) in sliderAmount" v-bind:key="index")
              VueSlideBar(v-model="value"
              :min="0"
              :max="item" //set the value here
              :processStyle="slider.processStyle"
              :lineHeight="slider.lineHeight"
              :tooltipStyles="{ backgroundColor: 'red', borderColor: 
              'red' }"
              class="demo-demo" id="slider-1")