no-mutating-props.md

disallow mutation of component props (vue/no-mutating-props)

This rule reports mutation of component props.

Rule Details

👎 Examples of incorrect code for this rule:

<template>
  <div>
    <input v-model="value" @click="openModal">
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      }
    },
    methods: {
      openModal() {
        this.value = 'test'
      }
    }
  }
</script>

👍 Examples of correct code for this rule:

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      }
    },
    methods: {
      openModal() {
        this.$emit('input', 'test')
      }
    }
  }
</script>

🔧 Options

Nothing.

Related links

• Vue - Prop Mutation - deprecated
• Style guide - Implicit parent-child communication