[Vuejs]-How to use same prop for different select fields separately in vue js

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.

👤Teddy

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.

Leave a comment