Get Length Value From Vue Observer

i've developing electron apps with vue-cli-plugin. when print an array it's return observer. what i do: console.log(this.listfile) output from developer tools [__ob__: Observer] 0

Solution 1:

readdir is async this means you have no guarantee when it gets executed.

watch: {
  listData: function () {
  // electron filesystemconst fs = require('fs')
  var dirLocation = this.listData.replace(/\\/g, "/")
  console.log(dirLocation)
  fs.readdir(dirLocation, (err, file) => {
    file.forEach((filename) => {
      this.listfile.push({name: filename, selected: false})
    });
    console.log(this.listfile.length); // works
   });
   // This line is executed before `file.forEach()`
},

readdirSync is the syncronous alternative.

watch: {
  listData: function () {
  // electron filesystemconst fs = require('fs')
  var dirLocation = this.listData.replace(/\\/g, "/")
  console.log(dirLocation)
  var file = fs.readdirSync(dirLocation);
  file.forEach((filename) => {
    this.listfile.push({name: filename, selected: false})
  });
  console.log(this.listfile.length); // executed after the above code has run
},