B
B
beduin012018-07-11 18:43:52
Vue.js
beduin01, 2018-07-11 18:43:52

How to execute computed only after the function is executed?

The problem is that I am getting an error: Cannot read property 'april' of undefined"
The code is the following:

var app = new Vue({
  el: '#app',
  data: {
    my_dates: {},
  },
    computed: {
      myvalue: function () {
        return Number(this.my_dates['2018-04-23']['april']) + Number(this.my_dates['2018-04-23']['may'])
      }
    },

    methods: 
    {
      getTableData: function()
      {
          // GET /someUrl
      this.$http.get('http://127.0.0.1:8000/ponizovka_get_data').then(response => {
        // get body data
        this.my_dates = response.body;

      }, response => {
        // error callback
      });
      }
    },

    created: function(){
        this.getTableData()
    }

})

At the same time, the output in the template:
{{my_dates['2018-04-23']}}works.
However, my_dates['2018-04-23']['april']it is not possible to contact. That is, it is displayed, but swears (see above).
I want to make my computed run only after all the data is loaded? Although the problem may be that Vue does not process the nested object because my_dates['2018-04-23'] he sees, but my_dates['2018-04-23']['april'] is gone

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-07-11
@beduin01

Question - how do you use myvalue? If somewhere in the template, then v-if will fix the situation:
Otherwise, it makes sense to check for the existence of the desired property in my_dates and act according to the circumstances, for example like this:

myvalue() {
  сonst date = this.my_dates['2018-04-23'];
  return date ? Number(date.april) + Number(date.may) : null;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question