@Miki8887
Front-end разработчик

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

Если в одном компоненте есть вычисляемое свойство, которое передается в 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>

Получается в итоге зацикливание.
  • Вопрос задан
  • 313 просмотров
Решения вопроса 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
За изменение пропсов в дочернем компоненте надо бить по рукам палкой.
Копируйте в дочернем компоненте проп item и работайте с ним. Об изменениях надо эмитить в родителя события с помощью $emit.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы