Composite Functions for Vue Event Handlers

Question

I am using Vue 2.0, ES6, Webpack.

I have one component (let it be called Parent) and a few children (let it be called every time text-input). Each one text-inputthrows an event called change, and each of them must change one other property inside the parent. Say it Parenthas data with a name infoand inside infoI have a name, email address, etc.

What I want to accomplish is to set the correct property (name, email address, ...) using the same function for my option @change.

<text-input
   @change="alterProperty('name')">  
 </text-input>
 <text-input
   @change="alterProperty('email')">  
 </text-input>

My Parentwill have this method:

alterProperty (property) {
  return (changeValue) => {
    this.info[property] = changeValue
  }
}

, , , - , Vue , . - - , .

Answer 1

, jsFiddle: https://jsfiddle.net/mani04/2mmbsyy3/

, . text-input:

<text-input :value="userInfo.name" @change="alterProperty('name', $event)"></text-input>

. alterProperty - , @change. $event - , , . .

: https://vuejs.org/guide/events.html#Methods-in-Inline-Handlers

jsFiddle, $event - , DOM event. alterProperty ( ) :

alterProperty: function(propToChange, newValue) {
    this.userInfo[propToChange] = newValue;
}

jsFiddle , .

:

this.value input, this.value . , , :

[Vue warn]: ...

, - textFieldValue, . getter this.value, setter - , change , this.value, .

Answer 2

2 . - v-on, emitter . - .

.

, v-on, emitter way, https://jsfiddle.net/seaify/p8fh108j/

Vue.component('text-input', {
    props: ["parent_field"],
    template: `
        <input type="text" v-model="text">
    `,
    data: function() {
      return {text: ''}
    },
    watch: {
       text: function(value, old_value) {
          this.$emit('update_parent', this.parent_field, value)
       }
    }
});

Vue.component('my-app-form', {
    template: `
        <div class="my-app-form">
            <div class="my-text-input">
                Name: <text-input parent_field="name" v-on:update_parent='update_self'></text-input>
            </div>
            <div class="my-text-input">
                Email: <text-input parent_field="email" v-on:update_parent='update_self'></text-input>
            </div>
            <div class="result">Result: name = {{name}}, email = {{email}}</div>
        </div>

        `,
    methods: {
       update_self: function(key, value) {
       this[key] = value
      }
    },
    data: function() {
        return {
                name: "",
                email: ""          
        }
    },
});

new Vue({
    el: '#app',
    template: `
        <div>
            <my-app-form></my-app-form>
        </div>
    `,
});

, , , https://jsfiddle.net/seaify/jczowb54/10

Vue.component('text-input', {
    props: ["parent_field"],
    template: `
        <input type="text" v-model="text">
    `,
    data: function() {
      return {text: ''}
    },
    watch: {
       text: function(value, old_value) {
            this.$parent[this.parent_field] = value
       }
    }
});

Vue.component('my-app-form', {
    template: `
        <div class="my-app-form">
            <div class="my-text-input">
                Name: <text-input parent_field="name"></text-input>
            </div>
            <div class="my-text-input">
                Email: <text-input parent_field="email" ></text-input>
            </div>
            <div class="result">Result: name = {{name}}, email = {{email}}</div>
        </div>

        `,
    data: function() {
        return {
                name: "",
                email: ""          
        }
    },
});

new Vue({
    el: '#app',
    template: `
        <div>
            <my-app-form></my-app-form>
        </div>
    `
});

, .