Board doesn't react to updated config prop.

[Matthew-Nicholson]

Demonstrated here:

https://replit.com/@MapleDanish/chessboardnotworking#README.md

PR #3 Receive Updates was supposed to have fixed this, so it's possible I'm just doing something wrong.

TIA for taking a look, I can't figure it out.

[JamesTeague]

I will take a look. Sorry for the late response.

[Matthew-Nicholson]

I think chessground provides a 'set' method which is supposed to apply changes. I haven't had a chance to play with this yet but I'll experiment and make a PR if I figure anything out (unlikely, lol).

[JamesTeague]

@Matthew-Nicholson I appreciate your willingness to help. I'd love to use the set API if I could find a reasonable way to do it. I am a bit new to Vue myself. But what I see is that although the config object you create is reactive when you pass that to the Chessboard component, the component does not update if the object reference itself does not update.

Example:

 // Initial FEN is loaded/displayed properly.
  const config = reactive({
    fen: 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1' 
    // (Position after 1.e4)
  })
  // Now we change the FEN
  setTimeout(() => {
 config.fen = 'rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2'
    // (Position after 1.e4 e5)
}, 5000);
</script>

<template>
  <main>
    <p>{{config.fen}}</p>
   <Chessboard :config="{ fen: config.fen }" size="300px"></Chessboard>
  <p>Notice how the FEN changes, but the board doesn't update.</p>
  </main>
</template>

<style>
  p {
    margin-top: 20px;
    color: white;
  }
</style>

With this line <Chessboard :config="{ fen: config.fen }" size="300px"></Chessboard> the Chessboard component actually gets a new object and updates accordingly.

Here is an example (albeit, a bit more complicated) https://github.com/JamesTeague/book-moves/blob/master/src/components/boards/AiBoard/AiBoard.vue.

[JamesTeague]

PRs are appreciated though.