Not mutating prop, still get an error

[szabiaura]

Hi,

I’m trying to render a QSelect with an optional “Create New…” possibility on the top of the list. I’m using a prop to tell it whether it should have that option or just display existing elements:

@Component
export default class GroupSelector extends Vue {
  @PropSync('groupId', { type: Number }) id!: number;
  @Prop() readonly withAdd = false;

  get options() {
    return this.withAdd ? this.allGroupsWithAdd : this.allGroups;
  }

  get allGroupsWithAdd() {
    return [{ label: 'Create New Group…', value: 0 }, ...this.allGroups];
  }

  get allGroups() {
    // return all existing groups
  }

  // ...
}

And I pass the corresponding prop from the parent component:

      <group-selector :group-id.sync="group" with-add />

But I get the infamous error on the console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "withAdd"

Why is this happening? I’m not touching the withAdd property apart from reading its value, Vue still gives me an error. Is Quasar interfering with it? How can I fix this? Using a computed property as the error message suggests didn’t help.

Thanks!

[dobbel]

@szabiaura said in Not mutating prop, still get an error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

this line of code is assigning a value to withAdd:

@Prop() readonly withAdd = false;

what you probably want is to set a default value for withAdd

You can do that like:

props: {
      myProp: {
        type: String,
        default: ''
      }
    },

[szabiaura]

Thanks, so I did

  props = {
    withAdd: {
      type: Boolean,
      default: false
    }
  };

But this doesn’t seem to define withAdd as a prop in a ts-class component.

[dobbel]

@szabiaura said in Not mutating prop, still get an error:

But this doesn’t seem to define withAdd as a prop in a ts-class component.

I found this:

@Prop({default: '100vw'}) readonly width!: string

From here:
https://github.com/kaorun343/vue-property-decorator/issues/179

[szabiaura]

@dobbel Thanks, that almost did it. For the perfect solution you need

  @Prop({ type: Boolean, default: false }) readonly withAdd!: boolean;