Currently, I am in the midst of a Vue.js project where components are predominantly used. However, there are moments when I simply need to incorporate some Vue.js syntax without creating an entire component.
Since I am not utilizing the render function as usual, the HTML content that Vue attaches to is not completely overwritten, allowing me to seamlessly integrate Vue.js syntax into existing HTML elements.
new Vue({
el: '#vue',
name: 'Vue root',
data: {
store
},
components: {
Example
}
});
An instance of adding Vue.js syntax to existing HTML would be maintaining synchronization between two inputs, for instance:
Form one on index.html
<input type="text" attributes... v-model="store.arrival">
Form two on index.html
<input type="text" attributes... v-model="store.arrival">
Prior to introducing the store, I encountered a warning message along the lines of:
[Vue warn]: Property or method "arrival" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
This prompted me to introduce the store as I prefer not to overcrowd the data property of my root component with these stand-alone properties floating independently in space.
While I appreciate the flexibility of incorporating Vue syntax into existing HTML, it raises concerns about best practices.
Is there a more efficient way to store these variables than within the store (which may become cluttered quickly)? Alternatively, should I consider transitioning everything to components? Yet, this approach poses challenges as I will need to convert PHP variables to JavaScript if required.
I hope my explanation is coherent. Thank you for taking the time to read and feel free to request additional information if necessary.
Cheers.