Btukfyl

I have an array tour_plan in my state which contains an object(s).

tour_plan = [

    {

        day:1,

        location_id:3,

        location_name:'Colombo'

    }

]

I want to make this object

tour_plan = [

    {

        day:1,

        location_id:3,

        location_name:'Colombo',

        tour_id:3,

        tour_name:'City tour'

    }

]

After gothourgh the docs in vuex in figureout that this won't work in reactive manner in vuex mutations.

state.tour_plan[state.tour_plan.length - 1].tour_id = payload.tour_id;

state.tour_plan[state.tour_plan.length - 1].tour_name = payload.tour_name;

So I tried these 2 ways.

state.tour_plan[state.tour_plan.length - 1] = { ...state.tour_plan[state.tour_plan.length - 1],

                tour_id: payload.tour

             };



Vue.$set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour);

But non of them also doesn't work.
Where is the problem in my code?

You are correct about the fact you can't mutate an object/array item by index access without "breaking" the reactivity system.

About what You've tried, according to the documentation of Vue.set, it expects as first argument the entire object/array rather than the length.

So the correct manner is:

Vue.$set(state.tour_plan, 0, payload.tour);

where 0 is the index of the element you want to update(replace)

This worked for me.

   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_id', payload.tour)

   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_payment', payload.tour_payment)

   Vue.set(state.tour_plan[state.tour_plan.length - 1], 'tour_name', payload.tour_name)