Question

我在getFeedingsAgain中有一个简单的API调用。我在“ beforeMount”内部调用它，但通过console.logs可以看到，一旦调用“ mount”，“ catFeedingsAgain”的数据值将保持为空。我正在尝试在调用组件的“ mount（）”生命周期挂钩之前填充catFeedingsAgain数组，以便我在“ Mount（）”挂钩中拥有的函数可以使用该数组数据。我该如何工作？

谢谢您的时间。

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

注意：我基本上是尝试用getFeedingsAgain中API调用的结果数组替换Amcharts ... Line Chart＃2 ....“ dataProvider”中的初始数组。

```

<template>
  <!-- second chart group -->
  <div class="chart-block" style="padding-top:50px">
    {{ message }}
    <div ref="line" style="vertical-align: middle; display: inline-block; width: 50%; height: 30px;"></div>
    <div ref="column" style="vertical-align: middle;display: inline-block; width: 50%; height: 30px;"></div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    props: ['message'],
    name: 'app',
    computed:{

    },
    created(){
      this.getFeedingsAgain(this.message);
    },
    data() {
      return {
        chartCatID: this.message,
        catFeedingsAgain: [],
        catMedicationsAgain: [],
      }
    },
    mounted () {
      /**
       * Line Chart #2
       */
      // this.getFeedingsAgain(this.message);
      console.log("mounted");
      console.log(this.catFeedingsAgain);
      // TODO: line = weight(waf) / day(created?)
      AmCharts.makeChart( this.$refs.line, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "weight_after_food": 120
        }, {
          "day": 2,
          "weight_after_food": 54
        }, {
          "day": 3,
          "weight_after_food": -18
        }, {
          "day": 4,
          "weight_after_food": -12
        }, {
          "day": 5,
          "weight_after_food": -51
        }, {
          "day": 6,
          "weight_after_food": 12
        }, {
          "day": 7,
          "weight_after_food": 56
        }, {
          "day": 8,
          "weight_after_food": 113
        }, {
          "day": 9,
          "weight_after_food": 142
        }, {
          "day": 10,
          "weight_after_food": 125
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 5,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "weight_after_food",
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "guides": [ {
            "weight_after_food": 0,
            "lineAlpha": 0.1
          } ]
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0,
          "startOnAxis": true
        }
      } );

      /**
       * Column Chart #2
       */
      // TODO: column = dose(dosage) / day(created?)
      AmCharts.makeChart( this.$refs.column, {
        "type": "serial",
        "dataProvider": [ {
          "day": 1,
          "value": -5
        }, {
          "day": 2,
          "value": 3
        }, {
          "day": 3,
          "value": 7
        }, {
          "day": 4,
          "value": -3
        }, {
          "day": 5,
          "value": 3
        }, {
          "day": 6,
          "value": 4
        }, {
          "day": 7,
          "value": 6
        }, {
          "day": 8,
          "value": -3
        }, {
          "day": 9,
          "value": -2
        }, {
          "day": 10,
          "value": 6
        } ],
        "categoryField": "day",
        "autoMargins": false,
        "marginLeft": 0,
        "marginRight": 0,
        "marginTop": 0,
        "marginBottom": 0,
        "graphs": [ {
          "valueField": "value",
          "type": "column",
          "fillAlphas": 1,
          "showBalloon": false,
          "lineColor": "#ffbf63",
          "negativeFillColors": "#289eaf",
          "negativeLineColor": "#289eaf"
        } ],
        "valueAxes": [ {
          "gridAlpha": 0,
          "axisAlpha": 0
        } ],
        "categoryAxis": {
          "gridAlpha": 0,
          "axisAlpha": 0
        }
      } );
    },
    methods:{
      getFeedingsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
          .then(response => {
            console.log("getFeedingsAgain: ");
            console.log(response.data.results);
            this.catFeedingsAgain = response.data.results
          })
          .catch(error => console.log(error));
      },
      getMedicationsAgain(value) {
        axios.get(`${process.env.KITTY_URL}/api/v1/medications/?cat__slug=&cat__name=${value}`)
          .then(response => {console.log("catMedications: ");console.log(response.data.results); this.catMedications = response.data.results})
          .catch(error => console.log(error));
      },
    }
  }
</script>

<style>
  .amcharts-chart-div a{
    text-indent: -9999px;
    outline: none;
  }
</style>

```

Answer 1

您还可以创建观察者，以在变量更改时执行操作。

类似的东西

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

您可以在这里找到文档； https://vuejs.org/v2/guide/computed.html#Watchers

Answer 2

创建视图并且已经观察到数据时，您应该获取数据，这是在created钩子处发生的。

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

从Vue created个码头出发

在此阶段，实例已完成对以下选项的处理：表示已设置以下内容：数据观察，计算属性，方法，监视/事件回调。但是，安装阶段尚未开始

似乎是您要找的

Answer 3

首先，您不应该使用beforeMount()方法。尽可能避免使用它。而是使用created()生命周期方法：

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

第二，您希望在挂载之前填充一个阵列。但是由于您的数据是从API异步加载的，因此您无法这样做。您无法停止/暂停mounted事件的发生。 Vue.js不知道API响应何时可用。这可能需要2秒钟，3秒钟，或者只是失败。

您唯一的选择是在模板中使用v-if。只要数组长度为零，就可以隐藏DOM元素或显示加载进度栏。

首先，您不应该使用beforeMount()方法。尽可能避免使用它。而是使用created()生命周期方法：

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

第二，您希望在挂载之前填充一个阵列。但是由于您的数据是从API异步加载的，因此您无法这样做。您无法停止/暂停mounted事件的发生。 Vue.js不知道API响应何时可用。这可能需要2秒钟，3秒钟，或者只是失败。

您唯一的选择是在模板中使用v-if。只要数组长度为零，就可以隐藏DOM元素或显示加载进度栏。

最后，您可能需要初始化某种图表，然后可以使用Vue.js观察程序或在API的then()块中对其进行初始化。

编辑

我必须这样做，然后，如果我希望在每次更改时都初始化Charting组件，则将使用观察器：

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

这都是正确的方法。这完全取决于上下文。

如何在安装的生命周期挂钩之前填充阵列

3 个答案:

编辑