Если в props передается вычисляемое свойство, меняется ли вычисляемое свойство при изменении props у дочернего компонент?

Question

[Анна Шатковская]

Если в одном компоненте есть вычисляемое свойство, которое передается в props другого компонента, то при изменении props у дочернего компонента, значения вычисляемого свойства у родителя изменятся. Почему?

Часть кода в родителе:

<template>
  <item
      v-for="item in orderElements"
      :key="item.id"
      :item="item"
      :order="order.id"
    />
</template>
<script>
  import {mapGetters} from 'vuex'
  import Item from './item.vue'

  export default {
    name: 'OrderItems',
    components: {
      Item
    },
    computed: {
      //слушаем массив с путевками в хранилище
      ...mapGetters(['waybills', 'elements']),
      //поиск по позициям в заказе
      orderElements: function() {
        let orderElements = this.order.orderElement
        for(let i = 0; i < orderElements.length; i++) {
          orderElements[i].amount = orderElements[i].amount + orderElements[i].amountDiff
          delete orderElements[i].amountDiff
        }
          if (this.elements){
            for(let i = 0; i < this.elements.length; i++){
              for(let j = 0; j < orderElements.length; j++) {
                if (this.elements[i].element.id == orderElements[j].element.id) {
                  if (this.elements[i].price !== orderElements[j].price){
                     orderElements[j].price = this.elements[i].price
                     orderElements[j].itemChange = "price"
                  }
                  if (this.elements[i].amount !== orderElements[j].amount){
                     orderElements[j].amount = this.elements[i].amount
                     if (!orderElements[j].itemChange)
                       orderElements[j].itemChange = "amount"
                     else
                       orderElements[j].itemChange = "all"
                  }
                }
              }
            }
          }
        return orderElements.filter(item => String(item.name).indexOf(this.search) !== -1)
      }
</script>

Часть кода дочернего компонента:

<template>
  <b-modal :id="'change-'+item.id">
    <b-form @submit.prevent="saveChangeItem">
      <b-row>
         <b-col cols="8">
            Цена за шт.:
             <b-form-input
               v-model="item.price"
             />
            Количество:
            <b-form-input
              v-model="item.amount"
            />
            <b-btn
              variant="success"
              type="submit"
              :disabled="checkPriceAndAmount"
            >
              Сохранить
            </b-btn>
        </b-row>
      </b-form>
    </b-modal>
</template>
<script>
  import {mapGetters} from 'vuex'

  export default {
    name: 'Item',
    props: {
      //входные параметры из родителя-данные о позиции товара
      item:{
        type: Object,
        default: function() {
          return {}
        },
      },
     order:{
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        priceChange: false,
        amountChange: false,
      }
    },
    computed: {
      ...mapGetters(['elements']),
    },
    watch: {
      'item.amount': 'changeAmount',
      'item.price': 'changePrice'
    },
    methods: {
      changeAmount: function(){
        this.amountChange = true
      },
      changePrice: function(){
        this.priceChange = true
      },
    },
  }
</script>

Получается в итоге зацикливание.

Answer 1

[Алексей Ярков]

За изменение пропсов в дочернем компоненте надо бить по рукам палкой.
Копируйте в дочернем компоненте проп item и работайте с ним. Об изменениях надо эмитить в родителя события с помощью $emit.

Comments

[Анна Шатковская]

Да, вы совершенно правы. У меня из головы вылетело это совсем, опыта мало.
А могли бы еще подсказать в чем проблема, в вычисляемом свойстве в родителе я определяю переменную и в неё записываю массив:
let orderElements = this.order.orderElement, дальше изменяю его.
this.order- это тоже вычисляемое свойство, которое возвращает массив из хранилища.
так почему потом при дальнейшем действии из ребенка, которые касаются только ребенка, изменения поступают в хранилище и изменяется основной массив? никакого коммита на его изменения не было. у меня отдельный массив в хранилище для ребенка и на order

[Алексей Ярков]

Анна Шатковская, массивы и объекты в JS передаются по ссылке, а не по значению. Описание происходящей магии тут.

[Анна Шатковская]

Алексей Ярков, в документации vuex написано,что изменить состояния в хранилище можно только путём вызова мутаций. Но мутацию на изменения этого массива я не делаю,она как-то пролазит через другую мутацию и модуль хранилища или выходит технически можно влиять на состояния хранилища без мутаций?

[Алексей Ярков]

технически можно влиять на состояния хранилища без мутаций

Та ну само собой можно )) Вы подучите основы. Я же ссылку привел в предыдущем комменте.
Вызывать мутации для изменения стэйта - это рекомендация и best practice, а не обязательное условие.

[Анна Шатковская]

Алексей Ярков, Благодарю за помощь)