Подскажите правильный патерн - передаю в компонент через props значение

Question

Подскажите правильный патерн - передаю в компонент через props значение

которое будет меняться в компоненте и изменения через emit уходит выше.
Если внутри компонента указываю через v-model привязку к элементу то ругается что неожиданная мутация. Что логично, но как правильно?

#frontend #javascript #programming #russian #vue.js

0

24.04.2022

18 ответов

28 просмотров

Mihail Автор вопроса

Daria Shuleko
Не меняй пропс, а только емити. Он сам спустится н...

да я так и делаю но удобно сразу пропс вставить в v-model вот так но он тогда ругается

0

24.04.2022

Daria Shuleko

Mihail

да я так и делаю но удобно сразу пропс вставить в ...

Оберни в computed c геттером и сеттером

0

24.04.2022

Mihail Автор вопроса

Daria Shuleko
Оберни в computed c геттером и сеттером

да что то в голове что то такое такое мелькнуло. т.е. в set делать emit? Я реализовал иначе - сделал props и data в которой локальный значения привязаны к элементам а в created локальным значениям из дата присваиваются props. Ну а дальше на все изменения emit и в итоге все работает, но чувство что это костыль. Через сеттеры и гетеры правильней?

0

24.04.2022

Nikolay

Mihail

да я так и делаю но удобно сразу пропс вставить в ...

Не удобно и ведет к куче проблем, кроме того судя по коду тебе здесь вся formData и не нужна

0

24.04.2022

Mihail Автор вопроса

Nikolay
Не удобно и ведет к куче проблем, кроме того судя ...

ну да, мне из всего объекта три значения надо. Но даже если в пропс передам три, то ситуацию то это никак не поменяет...

0

24.04.2022

Nikolay

Mihail
ну да, мне из всего объекта три значения надо. Но ...

дальше обычный emit без всяких чудес с объектами и ключами, либо computed свойство с get и set, которое на запись эмитит а на прием передает

0

24.04.2022

Mihail Автор вопроса

Nikolay
дальше обычный emit без всяких чудес с объектами и...

про computed подсказали, там я понял. Поясни ,пожалуйста, а что изменит если я буду в пропс не объект передавать а конкретное значение (число). Разве от того что я в v-bind укажу пропс с одиночным значением, а на изменения ввода буду emit делать у меня ругатсья не будет что я меняю props?

0

24.04.2022

Nikolay

Mihail
про computed подсказали, там я понял. Поясни ,пожа...

а ты не будешь менять проп, ты будешь менять computed

0

24.04.2022

Nikolay

Mihail
про computed подсказали, там я понял. Поясни ,пожа...

Что-то такое получится <input v-model="prop"> { props: { someValue: { type: String, default: '' } } computed: { prop: { get() { return this.someValue }, set(newValue) { this.$emit('input', newValue) } } } }

0

24.04.2022

Mihail Автор вопроса

Nikolay
а ты не будешь менять проп, ты будешь менять compu...

а ну такой вариант я понял. думал что то иное еще ты предлагал. Спасибо!

0

24.04.2022

Nikolay

Mihail
а ну такой вариант я понял. думал что то иное еще ...

Другой вариант это твоя запись но без промежуточного объекта

0

24.04.2022

Mihail Автор вопроса

Nikolay
Другой вариант это твоя запись но без промежуточно...

Так а она не работает. У меня на нее Eslint ругается до ошибки :) Говорит нельзя мутировать props

0

24.04.2022

Nikolay

Mihail
Так а она не работает. У меня на нее Eslint ругает...

Ты никогда не сможешь мутировать проп, это нормально. Вот о чем я говорю <input @input="$emit('input', $event)" :value="someValue"> { props: { someValue: { type: String, default: '' } } }

0

24.04.2022

Mihail Автор вопроса

Nikolay
Ты никогда не сможешь мутировать проп, это нормаль...

ну да, это не работает с EsLint и без объекта. Сделал на computed, работает! Кода наверное чуть больше, но он читаемый хорошо и все логично. 👍

0

24.04.2022

Daria Shuleko

Mihail
да что то в голове что то такое такое мелькнуло. т...

В created - это если данные не асинхронные и уверен, что не будут меняться посередине процесса. Иначе watch

0

24.04.2022