vue/no-mutating-props

Dlaczego

Props flow one way, from parent to child. Assigning to a prop is refused with a warning; pushing into a prop array or setting a field of a prop object silently changes the parent's state from inside the child, so the data changes without the parent knowing who changed it, and the next parent render can overwrite it.

Poprawka

Emit an event and let the owner change its state (emit('update:modelValue', value), or defineModel() for a two-way binding). For a value the child edits locally, copy it: const draft = ref(props.initialValue), or computed for a derived value. Sort a copy: [...props.items].sort(...) or toSorted().

Przykłady

<!-- bad -->
<script setup>
const props = defineProps({ items: Array, count: Number })
function add(item) { props.items.push(item); props.count++ }
</script>
<!-- good -->
<script setup>
const props = defineProps({ items: Array, count: Number })
const emit = defineEmits(['add'])
const sorted = computed(() => props.items.toSorted((a, b) => a.rank - b.rank))
function add(item) { emit('add', item) }
</script>

Źródła

• Vue docs, Props (one-way data flow, mutating object and array props)
• eslint-plugin-vue, no-mutating-props

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain vue/no-mutating-props