Vue.js 如何在挂载生命周期挂钩之前填充阵列

我在GetFeedings中有一个简单的API调用。我在“beforeMount”中调用它，但我可以通过我的console.logs看到，调用“mounted”后，我的“catfeedingsreach”数据值保持为空。我试图在调用组件的“mounted（）”生命周期挂钩之前再次填充CATFeedingsArray，以便“mounted（）”挂钩中的函数可以使用该数组数据。我怎样才能做到这一点

谢谢你抽出时间

更新：现在包括整个组件代码

注意：我基本上是在尝试用GetFeedings中API调用的结果数组替换Amcharts中的初始数组…折线图#2…“dataProvider”

```

{{message}}
从“axios”导入axios；
导出默认值{
道具：['message']，
名称：“应用程序”，
计算：{
},
创建（）{
this.getFeedings（this.message）；
},
数据（）{
返回{
查特卡蒂德：这条消息，
CATFeedings再次：[]，
CATMedicinationsAgain:[]，
}
},
挂载（）{
/**
*折线图#2
*/
//this.getFeedings（this.message）；
控制台日志（“已安装”）；
console.log（再次使用此.catfeedings）；
//待办事项：行=重量（waf）/天（已创建？）
AmCharts.makeChart（此.$refs.line{
“类型”：“串行”，
“数据提供者”：[{
“天”：1，
“食物后的体重”：120
}, {
“天”：2，
“食物后的体重”：54
}, {
“天”：3，
“食物后的体重”：-18
}, {
“天”：4，
“食物后的体重”：-12
}, {
“天”：5，
“食物后的体重”：-51
}, {
“天”：6，
“食物后的体重”：12
}, {
“天”：7，
“食物后的体重”：56
}, {
“天”：8，
“食物后的体重”：113
}, {
“天”：9，
“食物后的体重”：142
}, {
“天”：10，
“食物后的体重”：125
} ],
“类别字段”：“日期”，
“汽车制造商”：错，
“marginLeft”：0，
“marginRight”：5，
“marginTop”：0，
“marginBottom”：0，
“图表”：[{
“valueField”：“食物后的重量”，
“showBalloon”：假，
“线条颜色”：“ffbf63”，
“底片颜色”：“289eaf”
} ],
“valueAxes”：[{
“gridAlpha”：0，
“axisAlpha”：0，
“指南”：[{
“食物后的重量”：0，
“lineAlpha”：0.1
} ]
} ],
“分类法”：{
“gridAlpha”：0，
“axisAlpha”：0，
“星光轴”：正确
}
} );
/**
*柱状图#2
*/
//TODO:列=剂量（剂量）/天（已创建？）
AmCharts.makeChart（此.$refs.column{
“类型”：“串行”，
“数据提供者”：[{
“天”：1，
“价值”：-5
}, {
“天”：2，
“价值”：3
}, {
“天”：3，
“价值”：7
}, {
“天”：4，
“价值”：-3
}, {
“天”：5，
“价值”：3
}, {
“天”：6，
“价值”：4
}, {
“天”：7，
“价值”：6
}, {
“天”：8，
“价值”：-3
}, {
“天”：9，
“价值”：-2
}, {
“天”：10，
“价值”：6
} ],
“类别字段”：“日期”，
“汽车制造商”：错，
“marginLeft”：0，
“marginRight”：0，
“marginTop”：0，
“marginBottom”：0，
“图表”：[{
“valueField”：“value”，
“类型”：“列”，
“填充字母”：1，
“showBalloon”：假，
“线条颜色”：“ffbf63”，
“底片颜色”：“#289eaf”，
“底片颜色”：“289eaf”
} ],
“valueAxes”：[{
“gridAlpha”：0，
“axisAlpha”：0
} ],
“分类法”：{
“gridAlpha”：0，
“axisAlpha”：0
}
} );
},
方法：{
再次获取反馈（值）{
get（`${process.env.KITTY\u URL}/api/v1/feedings/？cat\uu slug&cat\uu name=${value}`）
。然后（响应=>{
log（“GetFeedingsReach:”）；
日志（响应、数据、结果）；
this.catfeedingsreach=response.data.results
})
.catch（错误=>console.log（错误））；
},
GetMedicalationsAgain（值）{
get（`${process.env.KITTY\u URL}/api/v1/drughts/？cat\uu slug=&cat\uu name=${value}`）
.then（response=>{console.log（“catmediates:”）；console.log（response.data.results）；this.catmediates=response.data.results}）
.catch（错误=>console.log（错误））；
},
}
}
.amcharts图表a分区{
文本缩进：-9999px；
大纲：无；
}

---

```

您应该在创建视图并且已经观察到数据时获取数据，这是在

created

hook中发生的

// rename beforeMount -> created
created(){
  this.getFeedingsAgain(this.message);
}

从

创建的
停靠

在此阶段，实例已完成对选项的处理
表示已设置以下各项：数据观测、计算
属性、方法、监视/事件回调。然而，越来越多的人
阶段尚未启动

似乎这就是您要查找的内容首先，您不应该使用
beforeMount（）
方法。尽量避免。而是使用
created（）
life-cycle方法：

created() {
      this.getFeedingsAgain(this.message);
}

created() {
      this.getFeedingsAgain(this.message);
}

其次，您希望在挂载之前填充一个数组，称之为。但由于您的数据是从API异步加载的，所以您不能这样做。您不能停止/暂停
装载的
事件的发生。Vue.js不知道API响应何时可用。这可能需要2秒、3秒或干脆失败

唯一的选择是使用
v-if
created() {
      this.getFeedingsAgain(this.message);
}

watch: {
    catFeedingsAgain() {
        AmCharts.makeChart(this.$refs.line, {
            "type": "serial",
            "dataProvider": this.catFeedingsAgain,
        });
    }
},

methods: {
    getFeedingsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
        .then(response => {
            this.catFeedingsAgain = response.data.results;
            AmCharts.makeChart(this.$refs.line, {
                "type": "serial",
                "dataProvider": this.catFeedingsAgain,
            });
        })
        .catch(error => console.log(error));
    },
}

watch: {
  catFeedingsAgain: function() {
    AmCharts.makeChart( this.$refs.line, {
      "type": "serial",
      "dataProvider": this.catFeedingsAgain,
      ...
    });
  }
},