Vue get child component value field

Question

I have a vue component to input user address that I need to use twice on same page.

Below my parent containing the two components:

<h3>My Address</h3>
<adress :user="user" ref="userAddress"></adress>      
<h3>Adress to delivery</h3>
<adress :user="user" ref="deliveryAddress"></adress>
<button type="submit" class="btn btn-primary pull-right" @click="ConfirmAdress()">Confirm</button>

Here is the vue configurations:

<script>
import AddressComponent from '../components/Address'
export default {
  name: 'Adress',
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  components: {
    'adress': AddressComponent
  }
}
</script>

I send the current user adress to te components so when the component is loaded the fields are filled with current information.

Here is my "Adress" component simplified

<template>
  <div>
    <div class="form-row">
      <div class="form-group col-md-7">
          <label for="inputAddress">Adress</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="Street, Aveneu" v-model="painelistaToLoad.addressName">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['user']        
  }
</script>

The goal is to get the values of the filled fields in the two components in the parent. The problem is that when the user changes any input field in the "userAdress" component, the "deliveryAdress" component is updated automatically with the same information. This is my first step.

Why aren't you using two different fields if both of them are seperate? — Mat J
I don't understand your question. As the address fields are the same, I would like to reuse the component. — Guilherme Ferreira
You can reuse the component, but you should bind to two different properties. You are binding both to the same field user. — Mat J
Ual, that was it. Answer the question so that I can mark your answer as the correct one. Thank you — Guilherme Ferreira
I realized that I needed to do a _.cloneDeep with lodash. Maybe because I'm associating the vuex state? — Guilherme Ferreira

Guilherme Ferreira Guilherme Ferreira · Accepted Answer · 2018-10-16T12:50:08

After the help I received from @Mat J, I needed to use the lodash _cloneDeep. That's because the vuex state is copied and/or passed by reference, so any changes I made to one of your copies were all changed. Now with _.cloneDeep all copies are vuex state independent, so I can change values inside my components

Vue get child component value field

1 Answers