Как исправить ошибку мутации?

Question

[vikas_web]

выдает 2:19 error Unexpected mutation of "modelValue" prop vue/no-mutating-props
тоесть ругается на данную строку

<template>
	<select v-model="modelValue" @change="changeOption">
		<option  disabled value="">test</option>
		<option v-for="option in options" :key="option.value" :value="option.value"> {{option.name}} </option>
	</select>
</template>

<script>
	export default {
		name: 'my-select',
		props: {
			modelValue: {
				type: String
			},
			options: {
				type: Array,
				default: ()=>  []
			}
		},
		methods: {
			changeOption(event) {
				this.$emit('update:modelValue', event.target.value);
			}
		}
	}
</script>

Answer 1

[Вадим]

поменять v-model на :value

Comments

[vikas_web]

Вадим, спасибо
да, так пропала ошибка. А почему так? просто для себя хочу понять

[Вадим]

vikas_web, потому что v-model это "обёртка" над :value и @change(В данном случае, для простых полей ввода - input).
Таким образом, пропихнув значение через v-model сначала сам vue под капотом менял значение, а потом и Вы сверху через обработчик change.

Таким образом, vue мутировал проп.

[Вадим]

vikas_web, только Вы делали это правильно, через emit, а в v-model напрямую меняется переданная переменная