Vuejs: How can I add additional items to an array that is passed as props?

Question

I have an object location that I am passing into my form—so that the form fields repopulate correctly.

My parent template looks like this:

 <LocationForm :location="location" />

My form template is quite large, so I won't be able to show all of it here. However, In my location I am allowing users to create blackout date(s). The tricky part is, there may already be (blackout) dates created, so that array may already have items.

This is what (part) of my location prop looks like:

// LocationForm.vue

props: {
    location: {
      type: Object,
      required: false,
      default: () => ({
        name: '',
        streetAddress1: '',
        blackouts: [], // this may already have values.
      })
  },

My template looks like this when outputting the blackouts:

<div v-for="(blackout, idx) in $v.location.blackouts.$each.$iter"
    :key="idx"
    class="space-y-6"
>...</div>

The $v. is because I am using vuelidate to handle form validation.

I have a button in my form that when clicked, I'd like to add (push) new items into my blackouts array. The problem is, when I click the button, I get the error:

error Unexpected mutation of prop

The error makes sense, I can't add children without the parent knowing about it. How can I allow users to add (push) new blackouts?

Answer 1

I see you are using vuelidate—and you're already looping through the blackouts array. I like to think of the $v element as an extension of what the actual data element is.

Meaning $v.location can be thought of as the same as location. This is where using vuelidate (and probably others I'm sure) is helpful.

Since you have this:

<div v-for="(blackout, idx) in $v.location.blackouts.$each.$iter">

You can push new items into $v.location.blackouts. So if you have a button that when clicked adds new items, you could do this:

<button @click="addNewBlackout()">Add new blackout</button>


addNewBlackout() {
    this.$v.location.blackouts.$model.push({
        name: '',
        ...
    });
},

Now, my $v.location.blackouts.$model will also be updated with any new items. You won't have to figure out how to "merge" an additional array back into your $v.model

Answer 2

To follow up with @zcoop98 suggested, here is another solution.

Since your child component is your form <LocationForm>, you can emit an event from your addNewBlackout method:

addNewBlackout() {
    this.$emit('blackout', {
        name: '',
        ...
    });
},

From there you'd need to update your LocationForm in the parent template to look like this:

<LocationForm @blackout="handleBlackout"/>

You can call handleBlackout whatever you like. It just has to match a method name in your methods attribute:

handleBlackout(payload) {
    this.location.blackouts.push(payload);
},