I've recently started diving into Vue, and I've found myself responsible for tweaking an existing codebase. There's this data.js file that caught my attention, containing a handful of objects holding city information, like:
export default {
nyc:
cleaning: 3,
maintenanceS: 1
}
}
In one specific component, index.vue, the data is brought in just like any typical JavaScript object:
import data from '../components/logic/data'
Now in another component, it's loaded as a prop:
export default {
data () {
return {}
},
props: ['data'],
computed: {
...
As per my readings on Vue's documentation, I have a basic understanding of how props are passed down from a parent to child components. Is it safe to assume index.vue acts as the parent component for any other components receiving 'data' as a prop?
I'm trying to enable users to modify the values of the 'data' object using a text box:
<td>Cleaning: <input type="number" v-model.number.lazy="cleaning"/></td>
Am I on the right track assuming that using v-model is the proper way to update these values so they reflect across all components? From what I gather, there's probably some additional JavaScript involved within the component to handle this updating, but I'm uncertain about the approach. How does one go about ensuring the updated value propagates through all components utilizing the 'data' object?
Your insights would be greatly appreciated!