slide-bar w vue.js nieprawidłowe wartości w max

Question

Próbuje zrobić ui-slider w vue.js. mam go działający w jquerry ale chciałabym go zaimplementować w vue.js. Oczywiście od samego początku mam problem. zainstalowałam vue range slider  i wybrałam sobie taki który pokazuje min i max. Wszystko fajnie działa, ale chciałabym podstawić sobie pod wartość max moje dane, które pobieram z api. Jest to tablica z 11 liczbami [400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000,]. kiedy próbuje tak zrobić dostaje allert, że moje dane są tablicą, a nie liczbą "Invalid prop: type check failed for prop "max". Expected Number with value NaN, got Array". No i kompletnie nie wiem jak teraz to obejść. Może ktoś miał do czynienia z takim sliderem i będzie w stanie mi to podpowiedzieć, bo dokumentacja nt. tych sliderów jest dość uboga :/

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

<script>
import co from "@/util/co.js";
import VueSlideBar from "vue-slide-bar";
var sliderAmount;
export default {
  name: "Repaid",
  components: {
    VueSlideBar
  },
  data() {
    return {
      value: 8,
      slider: {
        lineHeight: 10,
      },
      sliderAmount: undefined
    };
  },
  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; //to moja tablica
    }
  }
};
</script>

 

Comments

Zainstaluj te paczke i wstaw kod tu: https://codesandbox.io/s/vue