在vue.js中将var从装载传递到计算时出现问题

我试图从中传递一个变量。我从api request=>

sliderAmount

获取它们，并将它们传递给computed。但我有一个错误“sliderAmount未定义”

我应该首先在

数据中设置var，然后在mouted和computed之间连接吗

HTML

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组件中的最大值。但仍有错误。
您无法访问在执行上下文中声明的值。一旦
fn
执行上下文结束，垃圾收集器将清除所有相关的
fn
内存分配（除非您正在关闭）

要解决这个问题，要么

将
sliderAmount
添加到
数据
属性并更改它

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

我更改了这个var声明，将属性添加到数据中，但现在当我执行
console.log（sliderAmountValue）
时，它是未定义的。因此，sliderAmount from mounted中的my value未通过？当您将属性添加到
数据时，它会添加到
vue
上下文中，即
此
。尝试记录
console.log（this.sliderAmount）
。我记录了，但仍然没有定义。但是，当我
console.log（sliderAmount）
装入时，我的值是正确的。请更新有问题的更改，让我看看您做了什么，并添加了哪些内容。
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;
    }
 }