title: Dice roller app - how to improve data handling?
body: <p>A year ago I created a dice roller web app to improve my UI/UX skills and to learn Vue/Nuxt. I got a lot of positive feedback and was asked to add more features, so I am currently doing a complete overhaul of the app.</p>
  
  <p>This is the website: <a href="https://wuerfel.app/" rel="nofollow noreferrer">https://wuerfel.app/</a></p>
  
  <p>My question concerns the way of adding and handling dice.</p>
  
  <p>Dice can be added in three ways: by clicking a die icon, by entering dice code or by using the dice calculator.</p>
  
  <p>Currently, when a die is added to the table, an array of dice objects is created. When rolling the dice, a second array of the same length is created, showing the results instead of the dice objects. Everytime, the first array is updated, the dice code string changes. And if the dice code is changed manually, the array gets updated aswell.</p>
  
  <p>This seems <strong>very messy and slow</strong> and it makes it difficult for me, to add new features. </p>
  
  <p>I was thinking of having only a string (dice code) instead of the first array of dice objects. So everytime I click on a die, its just the string that gets changed, not a whole array.</p>
  
  <p>Any other ideas or suggestions how I can improve the way of handling the data? I am not a backend developer so every hint is valuable for me!</p>
  
  <p>Thanks, Robin</p>