emit changes to parent from child

Question

I have a problem making the parent binding update from changes in the child.

I have the following vue code:

Vue.component('usercomp', {
  template: '<input v-model="user.name.lastname">',
  props:['user'],
  computed: {
    fullname: function() {
        return this.user.firstname + ' ' + this.user.lastname;
    }
  }
});

new Vue({
  el: '#user-example',
  data: function() {
    return {
        user: {
        name: {
            fullname: '',
            firstname: '',
          lastname: '',
        }
      }
    }
  }
})

where I am binding the computed property of the child on the parents view. I'm trying to get a computed property from the child to update a <p> in the parent. I've tried using a store, but seems to give the exact same result unfortunately.

I have created this fiddle: https://jsfiddle.net/alexintime/02jxvqex/7/

It's not entirely clear to me what you want to do. The fullname computed property is defined in the component. Is there a reason you don't want to just define that in the parent? Also, while several people are mentioning that you need to $emit the value, because you are passing an *object*, this really isn't necessary. — Bert, Aug 14 '17 at 15:16

Andrey Kudriavtsev · Answer 1 · 2017-08-15T06:49:21.817

1

I've updated your fiddle. https://jsfiddle.net/observing/2jumkmvc/9/

Vue.component('usercomp', {
  template: `<div>
  <input v-model="user.name.firstname">
  <br>
  <input v-model="user.name.lastname">
  </div>`,
  props:['user'],
  computed: {
       fullname: function() {
     return this.user.name.firstname + ' ' + this.user.name.lastname;
    }
  },
  watch: {
    fullname: function (val) {
      this.$emit('change-full-name', val)
    }
  }
});

new Vue({
  el: '#user-example',
  data: function() {
       return {
   user: {
       name: {
          fullname: 'empty until type',
       firstname: 'James',
          lastname: 'Holden',
        }
      }
    }
  },
  methods: {
    changeFullName: function (fullName) {
      this.user.name.fullname = fullName
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="user-example">
  <p> {{user.name.fullname}} </p>
  <usercomp v-bind:user="user" 
  v-on:change-full-name="changeFullName"></usercomp>
</div>

edited Aug 15 '17 at 06:49

answered Aug 14 '17 at 12:40

Andrey Kudriavtsev

1,124
11
19

1

You can remove your @keyup events entirely and the [fiddle will still work](https://jsfiddle.net/2jumkmvc/2/). – Bert Aug 14 '17 at 15:12
Yes. )) I just showed how he can change parent from a child... – Andrey Kudriavtsev Aug 14 '17 at 15:18
1

I'm trying to point out that he *is* changing the parent from the child. Objects are passed by reference. In this specific case, no $emit is necessary. – Bert Aug 14 '17 at 15:20
1

yes! I've removed keyup event and now parent can update by computed property in the child. VisualBean asked to do this "I'm trying to get a computed property from the child to update a p in the parent." – Andrey Kudriavtsev Aug 15 '17 at 07:00

score 0 · Answer 2 · answered Aug 14 '17 at 12:24

0

You will have to emit an event with vm.$emit from the child to the parent component then listen/get the value with vm.$on

For example

vm.$on('name', function (val) {
  console.log(val)
})

vm.$emit('name', 'John Doe')
// -> "hi"

answered Aug 14 '17 at 12:24

highFlyingSmurfs

2,989
2
15
28

emit changes to parent from child

2 Answers2