При излучении объекта все элементы объекта помещаются во все массивы. - PullRequest
Новая
       8

При излучении объекта все элементы объекта помещаются во все массивы.

0 голосов
/ 05 ноября 2018

Очень жаль за запутанный заголовок, но я не знаю, как это лучше выразить. Итак, у меня есть два компонента Vue, которые обмениваются некоторыми данными. Вот мой родительский компонент 

<template>
  <dashboard-detail-form @submit-query="updatePaymentEntry"
  ref="dashDetailForm"></dashboard-detail-form>
</template>

<script>
import axios from 'axios'
import DashboardDetailForm from './DashboardDetailForm'

export default {
  components: {
    DashboardDetailForm
  },
  name: 'DashboardDetailPost',
  props: {
    paymentEntry: Object
  },
  methods: {
    updatePaymentEntry (data) {
      this.paymentEntry.amountRecievedParentArray[this.paymentEntry.amountRecievedParentArray.length] = data.amountRecievedParent
      this.paymentEntry.paymentModeParentArray[this.paymentEntry.paymentModeParentArray.length] = data.paymentModeParent
      this.paymentEntry.datePaymentParentArray[this.paymentEntry.datePaymentParentArray.length] = data.datePaymentParent
      this.paymentEntry.amountPaidTutorArray[this.paymentEntry.amountPaidTutorArray.length] = data.amountPaidTutor
      this.paymentEntry.paymentModeTutorArray[this.paymentEntry.paymentModeTutorArray.length] = data.paymentModeTutor
      this.paymentEntry.datePaymentTutorArray[this.paymentEntry.datePaymentTutorArray.length] = data.datePaymentTutor
      this.addPaymentEntry();
    },
    addPaymentEntry () {
      axios({
        method: 'put',
        url: this.paymentEntry.url,
        data: {
          amount_recieved_parent: this.paymentEntry.amountRecievedParentArray,
          payment_mode_parent: this.paymentEntry.paymentModeParentArray,
          date_payment_parent: this.paymentEntry.datePaymentParentArray,
          amount_payed_tutor: this.paymentEntry.amountPaidTutorArray,
          payment_mode_tutor: this.paymentEntry.paymentModeTutorArray,
          date_payment_tutor: this.paymentEntry.datePaymentTutorArray
        }
      })
      .then(() => {
        this.$refs.dashDetailForm.resetForm()
      })
      .catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

А вот и дочерний компонент 

export default {
  components: {
    FormDropdown,
    FormInput
  },
  name: 'DashboardDetailForm',
  props: {
    editDetailForm: Object
  },
  data () {
    return {
      showForm: false,
      form: {
        amountRecievedParent: null,
        paymentModeParent: '',
        datePaymentParent: '',
        amountPaidTutor: null,
        paymentModeTutor: '',
        datePaymentTutor: ''
      },
      paymentModeArray: [
        { value: "cash", text: "Cash" },
        { value: "paytm", text: "PayTM" },
        { value: "bank seth", text: "Bank Seth" },
        { value: "bank anuj", text: "Bank Anuj" },
        { value: "kotak", text: "Kotak" }
      ]
    }
  },
  created () {
    if (typeof this.editDetailForm !== "undefined") {
      this.form.amountRecievedParent = this.editDetailForm.amountRecievedParent
      this.form.paymentModeParent = this.editDetailForm.paymentModeParent
      this.form.datePaymentParent = this.editDetailForm.datePaymentParent
      this.form.amountPaidTutor = this.editDetailForm.amountPaidTutor
      this.form.paymentModeTutor = this.editDetailForm.paymentModeTutor
      this.form.datePaymentTutor = this.editDetailForm.datePaymentTutor
    }
  },
  methods: {
    formToggle () {
      this.showForm = !this.showForm
    },
    resetDetailForm () {
      this.form.amountRecievedParent = null,
      this.form.paymentModeParent = '',
      this.form.datePaymentParent = '',
      this.form.amountPaidTutor = null,
      this.form.paymentModeTutor = '',
      this.form.datePaymentParent = ''
    },
    validateBeforeSubmit () {
      this.$validator.validateAll().then(() => {
        if(!this.errors.any()) {
          this.$emit('submit-query', this.form)
          this.formToggle()
        }
      })
    }
  }

}
</script>

Теперь я получаю правильные значения в свойстве формы моего дочернего компонента. Теперь, когда я нажимаю кнопку, чтобы вызвать функцию validateBeforeSubmit (), она отправляет объект формы родительскому компоненту, который его слушает, и вызывает метод updatePaymentEntry. Здесь начинается проблема. Теперь каждое свойство объекта paymentEntry имеет шесть элементов, то есть все значения, которые были в объекте формы дочернего компонента, помещаются в каждое свойство paymentEntry родительского компонента. Я не понимаю, как это происходит. В моих предыдущих попытках я использовал команду .push () для добавления элементов в массив, но получил ту же ошибку.

Что я делаю не так? Может кто-нибудь объяснить мне?

РЕДАКТИРОВАТЬ: родительский компонент родительского компонента по запросу 

<template>
  <div id="dash-detail">
    <dashboard-detail-post
    :paymentEntry="paymentEntryComputed"></dashboard-detail-post>
    <table class="table">
      <thead>
        <tr>
          <th>Sr.No.</th>
          <th></th>
          <th>Amount</th>
          <th>Mode of Payment</th>
          <th>Date</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <template v-if="entry.amount_recieved_parent !== 0 || entry.amount_payed_tutor !== 0">
          <template v-for="(el, index) in entry.amount_recieved_parent">
            <tr :key="index">
              <th rowspan="2">{{ index }}</th>
              <th>From Parents</th>
              <th>{{ entry.amount_recieved_parent[index] }}</th>
              <th>{{ entry.payment_mode_parent[index] }}</th>
              <th>{{ entry.date_payment_parent[index] }}</th>
              <th rowspan="2">
                <dashboard-detail-edit :paymentEntry="entry"
                :paymentIndex="index"></dashboard-detail-edit>
              </th>
            </tr>
            <tr :key="index">
              <th>To Tutor</th>
              <th>{{ entry.amount_payed_tutor[index] }}</th>
              <th>{{ entry.payment_mode_tutor[index] }}</th>
              <th>{{ entry.date_payment_tutor[index] }}</th>
            </tr>
          </template>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios'
import DashboardDetailEdit from './DashboardDetailEdit'
import DashboardDetailPost from './DashboardDetailPost'

export default {
  name: 'DashboardDetail',
  components: {
    DashboardDetailEdit,
    DashboardDetailPost
  },
  data () {
    return {
      entry: {},
      paymentEntry: {
        url: '',
        amountRecievedParentArray: [],
        paymentModeParentArray: [],
        datePaymentParentArray: [],
        amountPaidTutorArray: [],
        paymentModeTutorArray: [],
        datePaymentTutorArray: []
      }
    }
  },
  methods: {
    getEntry() {
      axios({
        method: 'get',
        url: 'http://127.0.0.1:8000/api/dashboard/' + this.$route.params.id + '/'
      }).then(response => this.entry = response.data);
    }
  },
  created () {
    this.getEntry()
  },
  computed: {
    paymentEntryComputed: function () {
      if (this.entry !== null && this.entry.hasOwnProperty("amount_recieved_parent") && this.entry.amount_recieved_parent !== null)
        this.paymentEntry.amountRecievedParentArray = this.entry.amount_recieved_parent
      if (this.entry !== null && this.entry.hasOwnProperty("payment_mode_parent") && this.entry.payment_mode_parent !== null)
        this.paymentEntry.paymentModeParentArray = this.entry.payment_mode_parent
      if (this.entry !== null && this.entry.hasOwnProperty("date_payment_parent") && this.entry.date_payment_parent !== null)
        this.paymentEntry.datePaymentParentArray = this.entry.date_payment_parent
      if (this.entry !== null && this.entry.hasOwnProperty("amount_payed_tutor") && this.entry.amount_payed_tutor !== null)
        this.paymentEntry.amountPaidTutorArray = this.entry.amount_payed_tutor
      if (this.entry !== null && this.entry.hasOwnProperty("payment_mode_tutor") && this.entry.payment_mode_tutor !== null)
        this.paymentEntry.paymentModeTutorArray = this.entry.payment_mode_tutor
      if (this.entry !== null && this.entry.hasOwnProperty("date_payment_tutor") && this.entry.date_payment_tutor !== null)
        this.paymentEntry.datePaymentTutorArray = this.entry.date_payment_tutor
      if (this.entry !== null && this.entry.hasOwnProperty("url"))
        this.paymentEntry.url = this.entry.url
      return this.paymentEntry
    }
  }
}
</script>

1 Ответ

0 голосов
/ 05 ноября 2018

Вы не должны напрямую манипулировать свойством в компоненте.

Кажется, ваш paymentEntry передается родителю как свойство. Либо удерживайте локальную копию, манипулируйте ею, а затем обновите или посмотрите на модификатор .sync для свойств (https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier), если вы уверены, что это именно то, что вы хотите сделать.

Также push был верным путем.

...