Как лучше всего передавать данные из компонентов с множеством инпутов родителю?

Question

[origami1024]

Так как я сейчас делаю - много повторяющегося кода, тоесть в каждом поле нужно задать :value и метод в @input, при том этот метод будет всего лишь передавать аргумент наверх. Вот демонстрация того как у меня сделано сейчас.

<div>
    <input :value="city" @input="cityUpd">
    <input :value="salary" @input="salaryUpd">
    <input :value="exp" @input="expUpd">
    <input :value="jtype" @input="jtypeUpd">
    <input :value="curr" @input="currUpd">
</div>

props: {
    salary: String,
    city: String,
    exp: String,
    jtype: String,
    curr: String,  
  },
  methods: {
    cityUpd(new1) {
      this.$emit('cityUpd', new1)
    },
    salaryUpd(new1) {
      this.$emit('salaryUpd', new1)
    },
    expUpd(new1) {
      this.$emit('expUpd', new1)
    },
    jtypeUpd(new1) {
      this.$emit('jtypeUpd', new1)
    },
    currUpd(new1) {
      this.$emit('currUpd', new1)
    },
}

Подозреваю, что по нормальному можно сократить, чтобы для каждого отдельного инпута не нужно было писать дублирующийся код. У меня около 15 инпутов на некоторых компонентах.

Comments

[Михаил]

<input :value="curr" @input="($event) => $emit('currUpd', $event.target.value)">

Что-то вроде

Ну или так

<template>
<div>
  <input @input="pass($event, 'currUpd')">
</div>
</template>

<script>
export default {
  methods: {
    pass(e, name) {
      this.$emit(name, e.target.value);
    }
  }
};
</script>

но нафига вам такой компонент?

[origami1024]

Михаил,

но нафига вам такой компонент?

Компонент оч простой - страничка, которая показывается через view-router
Но данные на сервер отправляю из самого верхнего компонента.

Answer 1

[0xD34F]

Отправляйте наверх не только значение, но и имя параметра. Сами параметры соберите в один объект - так проще и ещё можно будет использовать v-model.

Comments

[origami1024]

Спасибо