Skip to content

Latest commit

 

History

History
176 lines (149 loc) · 3.59 KB

no-mutating-props.md

File metadata and controls

176 lines (149 loc) · 3.59 KB
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", *.configs["flat/essential"], "plugin:vue/essential", *.configs["flat/vue2-essential"], "plugin:vue/vue3-strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/vue3-recommended", *.configs["flat/recommended"], "plugin:vue/recommended" and *.configs["flat/vue2-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