0

我在表单中有一个子组件，该组件将对象作为父组件的道具。该对象用于存储用户通过输入输入的数据，并在用户键入时发出。现在老实说，我还不能 100% 确定发射是否有效。这是因为当我将对象的属性附加到输入元素内的 v-model 时，Nuxt 显示错误消息

Cannot read property 'insert property here' of undefined

令我困惑的是，如果我查看 Vue 开发工具内部，就会清楚地显示收到了 prop。当我单击子组件时，我可以查看它的所有属性，但是当我尝试引用它时，我得到了一个错误。

这是我将数据从父文件传递给子组件的方式。

<NewProjectIterations
  v-for="i in itterations"
  :key="i"
  :index="i"
  v-model="itterationsData[i]"
/>

这是javascript

export default {
  name: 'NewProject',
  components: {
    NewProjectIterations
  },
  data() {
    return {
      itterations: 2,
      payoutAmount: null,
      projectName: null,
      emailAssigned: null,
      itterationsData: []
    }
  },
  computed: {
    // Computed property that keeps all the form data inside of one object
    formData() {
      return {
        user: this.$store.auth.user._id,
        projectName: this.projectName,
        payoutAmount: this.payoutAmount,
        payoutDividedInto: this.itterations,
        emailAssigned: this.emailAssigned,
        itteration: this.itterationsData
      }
    }
  },
  mounted() {
    // Initialize the child components data object on mount inorder to store user submit data
    const object = {
      name: '',
      title: '',
      startDate: null,
      endDate: null,
      payoutAmount: this.payoutAmount / this.itterations,
      filesAttachhed: null,
      index: null
    }

    for (let i = 0; i < this.itterations; i++) {
      object.index = i + 1
      this.itterationsData.push(object)
    }
  },
  methods: {
    increaseItteration() {
      if (this.itterations > 5) {
        alert('Itterations cannot be more than 5, nice try')
        return
      }

      const object = {
        name: '',
        title: '',
        startDate: null,
        endDate: null,
        payoutAmount: this.payoutAmount / this.itterations,
        filesAttachhed: null,
        index: this.itterations + 1
      }

      this.itterationsData.push(object)
      this.itterations = this.itterations++
    },
    removeItteration() {
      if (this.itterations > 1) {
        alert('Itterations must be more than 1, nice try')
        return
      }
      this.itterations = this.itterations--
      this.itterationsData.pop()
    },
    removeItterationByIndex(index) {
      this.itterations = this.itterations--
      this.itterationsData.splice(index)
      this.itterationsData.forEach(({ index }, i) => {
        index = i + 1
      })
    },
    async submitProject() {
      // Submit the data and make a request to the backends API through Vuex & store the data 
      // inside of a database
      await this.$store.dispatch('projects/createNewProject', this.formData)
    }
  }

最后是<NewProjectItteration />单个文件组件。

<template>
  <div :id="index" class="New-Project-Iteration">
    <div class="New-Iteration-Upper-Half">
      <div class="New-Iteration-Index">
        <p>{{ index + 1 }}</p>
      </div>
      <div class="New-Interation-Header">
        <input
          id="title"
          v-model="value.name"
          type="text"
          placeholder="Enter Title"
          name="title"
          style="display: block"
        />
        <input
          id="date"
          v-model="value.startDate"
          placeholder="Start"
          class="textbox-n"
          type="text"
          onfocus="(this.type='date')"
          onblur="(this.type='text')"
        />
        -
        <input
          id="date"
          v-model="value.endDate"
          placeholder="Deadline"
          class="textbox-n"
          type="text"
          onfocus="(this.type='date')"
          onblur="(this.type='text')"
        />
      </div>
    </div>
    <div class="New-Iteration-Lower-Half">
      <p class="New-Iteration-Files">
        No Files Attached
      </p>
      <p class="New-Iteration-Money">
        $<input
          id="money"
          v-model="value.payoutAmount"
          type="number"
          placeholder="00.00"
          step="0.01"
          min="0"
          name="money"
        />
      </p>
    </div>
  </div>
</template>

和它的 javascript

export default {
  name: 'NewProjectIteration',
  props: ['index', 'value'],
  watch: {
    value() {
      this.$emit('input', this.value)
    }
  }
}

我的一部分感觉它与 Vue 的生活方式挂钩有关，而我正在错误地使用它们。无论如何，我想问这个问题，以防其他人遇到与我相同的问题并想阅读详细的回复。

4

0 回答 0