In my project, I have implemented Vue.js for two-way data binding on a remote control alarm clock. The main code can be found here.
You can access the running instance of the server here.
While most of the page uses Vue and JavaScript for rendering, I decided to integrate the bootstrap color picker due to its simplicity. However, integrating this color picker caused issues with accessing pre-rendered variables of the Vue root instance. To address this, I used
document.getElementById().style.display = "..."Below is how I defined my Vue app instance, where the color picker code is placed as the last element:
<div id="app"> <!--Vue.js-->
<!-- Your app content goes here -->
</div><!--app-->
For script handling, I set up various functions in Vue methods to handle actions like submitting time, toggling sound settings, and managing email notifications. Additionally, I utilized jQuery and Bootstrap dependencies for further functionality.
One challenge I encountered was synchronizing changes made via the color picker's UI directly to the Vue data value. While typing in the text box correctly updated the color map position and Vue data, changing values using the color map did not reflect back to the Vue data. How can I ensure that changes made through the color picker interface update the Vue data accordingly?
Appreciate any insights or suggestions. Thank you.