Javascript 滑动条如何更改vue.js的值

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

我找到了一些并安装了vue范围滑块。我实现了它，它已经起作用了

问题是，当我试图更改滑块上的值时。我从api请求中得到一些值，它们是一个数组：

[400600800100012001401601800200025003000]

。但我在幻灯片中的最大值必须是一个数字，而不是一个数组

我试图在文档中找到如何更改此最大值的信息，但什么也找不到：/ 我的滑杆看起来像这样

我想更改这些值​​对于数组中给定的值

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>

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
      };
     },

---

在该数组中循环，并将每个值指定给滑块的最大道具：

     .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") 

---

谢谢你的回答，但我需要它们。在移动滑块的过程中，我希望它们显示出来。不是全部，而是一张幻灯片中的一个值。是否要根据该数组中的值的数量创建多个幻灯片？这是一个单幻灯片条，因此当您从左向右移动按钮时，该值应更改并显示给您-该数组中只有一个值。像这样，但我想更改值​​将数组传递给

slider.data

的问题是什么？就像示例页面上的第二个slider一样？@ElijahEllanski谢谢！我是傻瓜。我太专注于第一个例子，以至于没有注意到其他的解决方案。我没有使用slider.value，但不起作用。我花了很多时间寻找正确的解决方案。你让我开心！又来了！

     .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")