Как отследить множество событий у компонента?

Question

[riksisharakshas]

Есть Root элемент, у него есть компонент, который генерирует множество событий и меняет состояние Rootа:

<user-form
  v-bind:formprops='userProps'
  @is-active="userProps.isActive = !userProps.isActive"
  @first-name-input="userProps.firstName = $event"
  @last-name-input="userProps.lastName = $event"
></user-form>

Может я что-то не так делаю, но куча @some-event напрягает, знающий человек мельком сказал, что можно как-то, грубо говоря, весь изменяемый объект наверх посылать, но я ничего не нашел, поделитесь статейкой или вашими решениями.

Comments

[Сергей delphinpro]

Что, реально удобно так писать? В одну строку. Ни черта же не видно что там в конце...

<user-form
    v-bind:formprops='userProps'
    @is-active="userProps.isActive = !userProps.isActive"
    @first-name-input="userProps.firstName = $event"
    @last-name-input="userProps.lastName = $event"
/>

Answer 1

[0xD34F]

можно как-то, грубо говоря, весь изменяемый объект наверх посылать

Можно.

Или пару ключ-значение. В этом случае обработчик в родительском компоненте останется один, и выглядеть будет примерно так:

@change="onChange"

methods: {
  onChange(e) {
    this.userProps[e.name] = e.val;
  }
}

Comments

[riksisharakshas]

Спасибо, а с объектом примерную реализацию не подскажите?

[0xD34F]

riksisharakshas, да просто берёте и закидываете пришедший объект в объект, находящийся в родительском компоненте:

onChange(e) {
  Object.assign(this.userProps, e);
}

Answer 2

[Александр Аксентьев]

vuex для этого есть

Answer 3

[Evgeniy S]

Там где вы эмитите события вида first-name-input, добавьте еще change и правда передавайте сразу весь объект наверх. так многие формы делают