LostRhapsody / expense_app

Budgie - Simple Budgeting App
https://expense-app-beige.vercel.app
1 stars 0 forks source link

Hydration warning - attribute missmatch #11

Open LostRhapsody opened 9 months ago

LostRhapsody commented 9 months ago

In grocery clicker, the hidden input's value "is dark" is either false on the server, true on client, or vice versa.

App and color modes work fine, it's literally just a warning, but I'd like it to go away.

<input 
  class="hidden"
  :value="isDark" 
  :change="colorUpdate()"    
  />

runtime-core.esm-bundler.js:44 [Vue warn]: Hydration attribute mismatch on <input class=​"hidden" value=​"false" data-v-inspector=​"pages/​grocery/​clicker/​index.vue:​335:​3" style=​"--10a6c880-color:​ white;​">​

  • rendered on server: value="false"
  • expected on client: value="true" Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead. You should fix the source of the mismatch.