1👍
First of all, components should not update props.
Refer:
https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
They should copy them during init, and update the copies.
Then possibly on some action like clicking on ‘Save’ button, or on blur, the component should emit the data as part of an event – say ‘input’ or ‘change’ event.
Refer:
https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
Edit – After the code and image were added:
You have to get your data structures right. And also, I recommend keeping your "master data" separate from your instance data.
List of cities is master data. List of places is master data. You keep them separate. You can keep a separate object mapping the details together into something like a TripSchedule entity.
For example:
One schedule or trip plan =>
{
city_id1: {
date1_ddmmyyyy: [place_id1a, placeid1b],
date2_ddmmyyyy: [place_id1c, placeid1d]
},
city_id2: {
date3_ddmmyyyy: [place_id2a, placeid2b]
}
}
Or, even better..
{
date1_ddmmyyyy:[
{city: city_id1, place: place_id1a},
{city: city_id1, place: place_id1b}
],date2_ddmmyyyy:[
{city: city_id1, place: place_id1c}
],
date3_ddmmyyyy:[
{city: city_id2, place: place_id2a},
{city: city_id2, place: place_id2b}
]
}
So, basically, don’t store the trip plan inside the city or place.
- [Vuejs]-Vue computed property in router template
- [Vuejs]-Extracting dynamic data from inputs into string
0👍
Just use _.cloneDeep() loadash function to clone prop in local data variable and then clone again that data for each day individual. _.cloneDeep() will prevent reactivity.
- [Vuejs]-Authentification with just a password
- [Vuejs]-How to exit a while loop depending of the result of an Axios call?