Vue получить поле значения дочернего компонента - PullRequest
Новая
       9

Vue получить поле значения дочернего компонента

0 голосов
/ 28 августа 2018

У меня есть компонент vue для ввода адреса пользователя, который мне нужно использовать дважды на одной странице.

Ниже моего родителя, содержащего два компонента: 

<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>

Вот Vue конфигурации: 

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

Я посылаю адрес текущего пользователя компонентам, чтобы при загрузке компонента поля заполнялись текущей информацией.

Вот мой упрощенный компонент "Адрес" 

<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>

Цель состоит в том, чтобы получить значения заполненных полей в двух компонентах родительского элемента. Проблема заключается в том, что когда пользователь изменяет любое поле ввода в компоненте «userAdress», компонент «deliveryAdress» автоматически обновляется с той же информацией. Это мой первый шаг.

1 Ответ

0 голосов
/ 16 октября 2018

После получения помощи от @Mat J мне нужно было использовать lodash _cloneDeep. Это потому, что состояние vuex копируется и / или передается по ссылке, поэтому все изменения, которые я внес в одну из ваших копий, были изменены. Теперь с _.cloneDeep все копии не зависят от состояния vuex, поэтому я могу изменять значения внутри своих компонентов

...