How to log Vue's computed properties or methods?

Question

I can't get logs from computed props or methods in Vue. This makes debugging a pain. I know computed properties are cached, but methods are not, and for example, this won't log anything anytime, BUT in fact it will update the properties. So why not logs???

,methods:{
  ,screw_dimensions: function(){
    console.log('test'); // TEST LOG

    var list = _.compact(_.map(this.screw_metrics_codes, function(code){
      var v = this.form.screw['metrics_' + code];
      console.log('test2'); // TEST LOG
      if(v && v.trim() != '') return code + '=' + v;
    }.bind(this)));

    if(list.length == 0) return '';
    return list.join(', ');
  }

  ,point_dimensions: function(){

    console.log('test'); // TEST LOG

    var list = _.compact(_.map(this.point_metrics_codes, function(code){
      var v = this.form.point['metrics_' + code];
      if(v && v.trim() != '') return code + '=' + v;
    }.bind(this)));

    if(list.length == 0) return '';
    return list.join(', ');
  }
}

Later in the html code I'm of course calling them {{ point_dimensions() }} and the like, and output is ok, but I have no logs.

Are we talking about logs in the browser's dev tools? If so, make sure in the Console pane that you don't filter out "Info" log level messages. — dr_barto
please give a reprex(Prepare Reproducible Example Code in github) — SeyyedKhandon

Cosimo Chellini Cosimo Chellini · Accepted Answer · 2018-08-21T09:30:04

you can use the built-in debugger in your browser or use

  debugger //make sure you have the devtool opened

instead of

  console.log('test'); // TEST LOG

How to log Vue's computed properties or methods?

1 Answers