0

I have a chess program that searches at various depths, and I want to update the view between every depth searched, like after depth 1, after depth 2 and so one. So I pass a callback function to the chess solving function:

updateAiInfo: (depth) => {
  this.depth = depth;
  this.$forceUpdate();
  console.log('check');
}

It's being called between every depth searched, it prints check, and I know that the vue property depth is being changed, I have double checked that, but the vue does not update until after the chess solving function is finished. How can I update the vue view instantly?

Edit: Since it's an es6 arrow function, this will not change, it will stay bound to the vue instance. This function is passed to the chess function inside mounted().

Michael Hancock
  • 2,673
  • 1
  • 18
  • 37
Mattias
  • 715
  • 1
  • 6
  • 19
  • I think the problem is that my chess function is prioritised higher than view rendering. – Mattias Aug 10 '18 at 13:35
  • Problem is with your arrow function syntax. – Helping hand Aug 10 '18 at 13:44
  • I don't get any error saying this.$forceUpdate() is not a function, and it should work this way so I really don't think that's the problem. – Mattias Aug 10 '18 at 13:45
  • https://stackoverflow.com/questions/42971081/use-arrow-function-in-vue-computed-does-not-work – Helping hand Aug 10 '18 at 13:49
  • https://stackoverflow.com/questions/42971081/use-arrow-function-in-vue-computed-does-not-work same is the case for functions inside method – Helping hand Aug 10 '18 at 13:51
  • You need to know more about `this` and also not to downvote way to fast :p – Helping hand Aug 10 '18 at 13:52
  • I know how this works in arrow functions, and I tried without arrow functions too anyways, and it doesn't work. – Mattias Aug 10 '18 at 14:07
  • Okay, deleting my answer, let me know when you get the solution. – Helping hand Aug 10 '18 at 14:13
  • There are microtasks, internal debouncing, and also scheduling, so forceUpdate will not be immediate. How much delay are you getting before the output renders? – Steven Spungin Aug 10 '18 at 14:30
  • It's not rendering until my chess function is completetely finished, it's blocking the render. My ugly fix is that I resume execution in 10 ms with setTimeout(), but obviously it's not optimal. – Mattias Aug 10 '18 at 17:53
  • @Mattias You may have to use [webworker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) to run your chess function, check [https://stackoverflow.com/a/19626821/5665870](https://stackoverflow.com/a/19626821/5665870) – Sphinx Aug 10 '18 at 23:06

0 Answers0