在 vue.js 中将 var 从 mounted 传递到 computed 时出现问题

Question

我试图从挂载中传递一个变量。我从 api request => sliderAmount 获取它们，并将它们传递给计算。但是我有一个错误 "sliderAmount is not defined"

我应该先在 data 中设置 var，然后再连接 mouted 和 computed 吗？

HTML

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

Vue.js

import co from "@/util/co.js";
import VueSlideBar from "vue-slide-bar";
export default {
  name: "Repaid",
  components: {
   VueSlideBar
  },
  data() {
   return {
     value: 8,
     slider: {
       lineHeight: 10
     },
     sliderAmount: undefined
   };
 },
  methods: {},
  mounted() {
    co.getLoanPriceList().then(data => {
      let dataLoan = data.data;
      console.log(dataLoan);
      let sliderAmount = dataLoan.amounts; //this is my var which I want 
      to pass to computed
      console.log(sliderAmount);//here I have an array: [400, 600, 800, 1000, 
      1200, 1400, 1600, 1800, 2000, 2500, 3000]
    });
  },
  computed: {
     sliderAmountMap() {
      const sliderAmountValue = this.sliderAmount; 
       console.log(this.sliderAmount); //here I have undefined
    }
 }

};

我想将 sliderAmountMap 中的一个值（它是一个数组：[400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000]）传递到组件 VueSlideBar 中的最大值。但是还是报错

Answer 1

您无法访问在执行上下文中声明的值。一旦 fn 执行上下文结束，垃圾收集器将清除所有相关的 fn 内存分配（除非您正在关闭）。

解决问题-要么

将sliderAmount添加到data属性并更改

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

或

声明全局变量。

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
     },
   };
 },
  methods: {},
  mounted() {
    co.getLoanPriceList().then(data => {
      let dataLoan = data.data;
      console.log(dataLoan);
      sliderAmount = dataLoan.amounts; //this is my var which I want 
      to pass to computed
      console.log(sliderAmount.length);
    });
  },
  computed: {
     sliderAmountMap() {
      const sliderAmountValue = sliderAmount.length; 
       return sliderAmountValue;
    }
 }

在 vue.js 中将 var 从 mounted 传递到 computed 时出现问题

Problem with passing a var from mounted to computed in vue.js

uislider

vue.js