Skip to content

Latest commit

 

History

History
175 lines (149 loc) · 3.49 KB

no-mutating-props.md

File metadata and controls

175 lines (149 loc) · 3.49 KB
Raw
pageClass sidebarDepth title description since
rule-details
0
vue/no-mutating-props
disallow mutation of component props
v7.0.0

vue/no-mutating-props

disallow mutation of component props

  • ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

This rule reports mutation of component props.

<!-- ✗ BAD -->
<template>
  <div>
    <input v-model="value" @click="openModal">
    <button @click="pushItem">Push Item</button>
    <button @click="changeId">Change ID</button>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      list: {
        type: Array,
        required: true
      },
      user: {
        type: Object,
        required: true
      }
    },
    methods: {
      openModal() {
        this.value = 'test'
      },
      pushItem() {
        this.list.push(0)
      },
      changeId() {
        this.user.id = 1
      }
    }
  }
</script>
<!-- ✓ GOOD -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
    <button @click="pushItem">Push Item</button>
    <button @click="changeId">Change ID</button>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      list: {
        type: Array,
        required: true
      },
      user: {
        type: Object,
        required: true
      }
    },
    methods: {
      openModal() {
        this.$emit('input', 'test')
      },
      pushItem() {
        this.$emit('push', 0)
      },
      changeId() {
        this.$emit('change-id', 1)
      }
    }
  }
</script>
<script>
  export default {
    setup (props) {
      // ✗ BAD
      props.value = 'test'
    }
  }
</script>

🔧 Options

{
  "vue/no-mutating-props": ["error", {
    "shallowOnly": false
  }]
}
  • "shallowOnly" (boolean) Enables mutating the value of a prop but leaving the reference the same. Default is false.

"shallowOnly": true

<!-- ✓ GOOD -->
<template>
  <div>
    <input v-model="value.id" @click="openModal">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  methods: {
    openModal() {
      this.value.visible = true
    }
  }
}
</script>

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation