Неожиданная мутация Prop
Я передаю свойство apiStepNumber из родительского компонента в дочерний компонент и использую его в дочернем компоненте как значение v-model.
ПРИМЕЧАНИЕ. Фрагменты кода не будут работать. Пожалуйста, избегайте их запуска. Фрагменты предназначены только для понимания.
Родительский компонент
Я вызываю различные API внутри родительского компонента и обновляю apiNumber data variable как 1 2 3.. и так далее при успешных вызовах API и передаю его как реквизит apiStepNumber.
if (firstApiCallSuccessful) this.apiNumber = 2;
if (secondApiCallSuccessful) this.apiNumber = 3;
..so on
<child-component :apiStepNumber = "apiNumber"></child-component>Дочерний компонент
(Я использую опору apiStepNumber в качестве значения v-модели и других базовых вычислений, но получаю ошибку, как "Unexpected mutation of 'apiStepNumber' prop" в
v-model = "apiStepNumber" )
<script>
export default {
props: {
apiStepNumber: {
type: Number,
required: true,
default: 1,
},
},
data() {
return {
steps: [
{ id: 1, text: "Emailing the Link" },
{ id: 2, text: "Getting Details" },
{ id: 3, text: "Extracting Data" },
{ id: 4, text: "Validating Data" },
{ id: 5, text: "Almost there..." },
{ id: 6, text: "All Done!" },
],
};
},
}
</script><v-stepper v-model = "apiStepNumber" vertical>
<v-stepper-step
v-for = "(item, i) in steps"
:key = "item.id"
:complete = "apiStepNumber > i + 1"
:step = "i + 1"
:color = "apiStepNumber > i + 1 ? 'success' : 'primary'"
>{{ item.text }}</v-stepper-step>
</v-stepper>Что я пробовал
- Сохранение значения реквизита в локальной переменной данных внутри дочернего компонента и использование этой локальной переменной, а не реквизита напрямую, но это не соответствует моим требованиям.
- Пытался просмотреть другие сообщения на StackOverflow по этой теме, но не смог решить проблему.
Заранее спасибо за вашу помощь в этом.
Конечно, отредактирую его соответствующим образом. Спасибо !
Ответы 1
Как говорится в ошибке, реквизиты не могут быть изменены. Если у дочернего элемента нет необходимости иметь собственное состояние (например, для отмены изменений), ему нужен родительский элемент, чтобы применить все изменения к состоянию, именно так работает двусторонняя привязка.
Ребенку необходимо генерировать событие при изменениях. Для Vue 2 можно следовать соглашению v-model следующим образом:
<v-stepper
:value = "modelValue"
@input = "$emit('input', $event)"
>
apiStepNumber необходимо переименовать в apiNumber соглашение:
props: {
value: {
...
Родитель может использовать <child v-model = "apiNumber"> для получения значений от события input.
В вопросе он называется apiNumber, поэтому в вашем случае это, скорее всего, <child-comment v-model = "apiNumber">.
Спасибо! Также, пожалуйста, дайте мне знать, если нам нужно переименовать его в родительском компоненте, передавая его в качестве реквизита.
Вот как он переименован в родительском компоненте: <child-comComponent v-model = "apiNumber"> вместо <child-comComponent :apiStepNumber = "apiNumber"> . А у ребенка это props: { modelValue : {..... См. документацию vuejs.org/guide/comComponents/v-model.html#basic-usage . Использование v-модели по умолчанию предполагает использование свойства modelValue.
Спасибо за помощь. Я попытался реализовать ваше решение, и оно решает проблему мутации, но почему-то я не получаю желаемой функциональности, которую искал в своем проекте, тогда как когда я удалил v-модель и использовал атрибуты v-bind и value, это дало мне желаемые результаты без каких-либо предупреждений или ошибок о мутации prop.
@HarshShukla Можете ли вы уточнить, как это выглядит? Вопрос не содержит тега версии vue. Если это версия 2, вам придется заменить все упоминания «modelValue» на «value».
Извините, забыл указать версию. Да, это v2, а не v3, можете ли вы предложить изменения согласно v2, если это возможно? Я попробую и сообщу, работает это или нет.
Я обновил. Вы можете использовать любые имена свойств и событий, это просто комбинация значение+ввод, позволяющая сократить его до v-модели в родительском элементе.
В редакторе есть формат «код». Нет необходимости использовать сниппеты, если они неработоспособны, особенно если для этого требуется комментарий по этому поводу.