What is the best way to pass data from components with many inputs to the parent?

Question

Vue.js

As I'm doing now - a lot of repetitive code, that is, in each field you need to set : value and a method in @input, while this method will only pass the argument to the top. Here's a demo of how I've done it now.

<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)
    },
}

I suspect that in the normal way it can be shortened so that for each individual input there is no need to write duplicate code. I have about 15 inputs on some components.

Answer 1

Send up not only the value, but also the parameter name . Collect the parameters themselves into one object - it's easier and you can still use v-model .