Question

我尝试了一些不同的方法，现在必须寻求帮助（提前致谢）。

我正在创建一个简单的 Vue js 应用程序，其中组件表单将数据作为对象（这有效）发送到其父级。然后父级运行 v-for 循环并将对象数据传递给显示数据的组件（这不起作用）。

Vue 版本

($ vue --version
@vue/cli 4.4.1)

父代码：

<template>
  <div class="MEDS">
    <goalForm @goal_data="goal_create($event)"/>
    <section>
      <div v-for="(goalItem, index) in this.goals_list_container" v-bind:key="index">
        <goalItem :goal="goalItem"/>
      </div>
    </section>
  </div>
</template>

// @ is an alias to /src
import goalForm from '@/components/Goal_form.vue'
import goalItem from '@/components/Goal_item.vue'

export default {
  name: 'MEDS',
  components: {
    goalForm,
    goalItem

  },
  data(){
    return{
      // Recievs goals from goalForm on submit, this is an array of objects
      goals_list_container: [],
    }
  },
  methods: {
    goal_create(payload){
      this.goals_list_container.push(payload);
      console.log(this.goals_list_container)
    }
  }
}

GOAL ITEM（应该显示目标）

<template>
 <div>
      <h3>{{goal.title}}</h3>
  </div>
</template>

export default {
 prop: ['goal'],
 data(){
   return {
     goal: {}
   }
 },
 watch: {
  
 }
}

Goal_form：（已编辑）

 <div>
    <form action="" class="goalForm" @submit.prevent="emit_Goal">
      <input type="text" name="title" id="title" v-model="title">
      <input type="text" name="description" id="description" v-model="des">
      <input type="date" name="dueDate" id="dueDate" v-model="dueDate">
      <input type="number" name="priority" id="priority" v-model="priority">
      <input type="submit" class="submit">
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
          title: null,
          des: null,
          dueDate: null,
          priority: null,
          goal_data: {}
    }
  },
  methods: {
    push_goal(){
      this.goal_data.title = this.title
      this.goal_data.des = this.des
      this.goal_data.dueDate = this.dueDate
      this.goal_data.priority = this.priority
    },
    emit_Goal(){
      // Move goal details into Object to be Emited
      this.push_goal()
      // Emit the form to the parent on submit
      this.$emit('goal_data', this.goal_data)
    }
  }
}

</script>

<style lang="scss" scoped>
  form {
    display: flex;
    flex-direction: column;
    input {
      &[name="title"]{
        
      }
    }
  }
</style>

for 循环似乎可以工作，因为 Goal_form 的每次提交都会创建 Goal_item 组件的一个新实例......但它没有填充任何数据。

我要么完全错了，要么错过了一些小事，但任何帮助都将不胜感激 -

W

将对象传递给组件 - vue js

0 个答案: