Javascript Vue.js将刚刚创建的数据从子组件传递到父组件

我有一个Vue.js/Laravel应用程序，在其中我正在努力完成一项简单的任务。我有一个名为Create的子组件，它在数据库中创建了一个新项，并且应该将这个新创建的数据发送给一个父组件，这样我就可以将这个新创建的数据包含到父组件jobs上的一个数组中。这实际上不起作用，我必须刷新页面才能在父组件上看到这一点。有人能帮我吗

这是我的子组件Create.vue

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <header class="modal-header">
        <slot name="header">
          <h3>Create new position</h3>
          <button type="button" class="btn-close" @click="close">
            x
          </button>
        </slot>
      </header>
      <section class="modal-body">
        <slot name="body">
                    <label for="title">Title</label>
                    <input v-model="job.name" type="text" name="name" class="form-control" required>

                    <label for="salary">Salary / Amount (k) per year (eg.:30, 40, 65)</label>
                    <input v-model="job.salary" type="number" name="salary"  class="form-control">

                    <label for="location">Location</label>
                    <input v-model="job.location" type="text" name="location" class="form-control" required>

                    <label for="experience">Years of experience eg.:1,2,4,5</label>
                    <input v-model="job.experience_years" type="number" name="experience_years" class="form-control" required>

                    <label for="benefits">Bonus - Benefits</label>
                    <input v-model="job.bonus" type="text" name="bonus" class="form-control">

                    <label for="description">Description / Job details</label>
                    <textarea v-model="job.description" rows="4" cols="50" name="description" class="form-control large"></textarea>
                    <br>

                    <input @click="saveJob" type="button" class="btn btn-primary" value="Save">
        </slot>
      </section>
      <footer class="modal-footer">
    </footer>
  </div>
</div>
</template>

<script>
 import moment from 'moment';
  export default {
    name: 'Create',

    data(){
        return{
            jobs: [],
            job: {id:'', name:'', description:'', salary:'', location:'', experience_years:'', bonus:'', expiration:'', created_at:''},
        }
    },

    methods:{

      close(job){
        this.$emit('newJob', job);
        this.$emit('closeCreateRequest');
      },

      moment,

      saveJob(){
          axios.post('http://localhost:8888/fintechjobs.io/public/api/job/createJob',this.job).then((response) => {
              this.close(this.job);
        }).catch((error) => this.errors = error.response.data.errors);

      }

    }
  }
</script>

<style>
  .modal-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal {
    background: #FFFFFF;
    box-shadow: 2px 2px 20px 1px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    left:25%;
    margin-left:15%px;
    position:fixed;
    width:50%;
    height: 70%;
    top:10%;
    overflow-y: auto;
    /* border: 1px black solid; */
  }

  .modal-header,
  .modal-footer {
    padding: 15px;
    display: flex;
    border: none!important;
  }

  .modal-header {
    /* border-bottom: 1px solid #eeeeee; */
    color: #214761;
    justify-content: space-between;
  }

  .modal-footer {
    /* border-top: 1px solid #eeeeee; */
    justify-content: flex-end;
  }

  .modal-body {
    position: relative;
    padding: 20px 20px;
    position: relative;
    padding: 20px 10px;
    margin-top: 30px;
    margin-left: 7px;
  }

  .btn-close {
    border: none;
    font-size: 20px;
    padding: 18px;
    cursor: pointer;
    font-weight: bold;
    color: #214761;
    background: transparent;
  }

  .btn-green {
    color: white;
    background: #4AAE9B;
    border: 1px solid #4AAE9B;
    border-radius: 2px;
  }


</style>

创建新职位
x
标题
年薪/金额（k）（例如：30、40、65）
位置
经验年数，例如：1,2,4,5
奖金-福利
说明/工作详情


从“力矩”中导入力矩；
导出默认值{
名称：“创建”，
数据（）{
返回{
职位：[]，
职务：{id:''，姓名：''，描述：''，工资：''，地点：''，工作年限：''，奖金：''，有效期：''，创建时间：'}，
}
},
方法：{
关闭（作业）{
此.$emit（'newJob'，job）；
此.emit（'closeCreateRequest'）；
},
那一刻，
saveJob（）{
轴心柱http://localhost:8888/fintechjobs.io/public/api/job/createJob，则（（响应）=>{
此.关闭（此.作业）；
}).catch（（error）=>this.errors=error.response.data.errors）；
}
}
}
.模态背景{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景色：rgba（0,0,0,0.3）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.莫代尔{
背景：#FFFFFF；
盒影：2px 2px 20px 1px；
溢出-x：自动；
显示器：flex；
弯曲方向：立柱；
左：25%；
左边距：15%像素；
位置：固定；
宽度：50%；
身高：70%；
排名前10%；
溢出y：自动；
/*边框：1px黑色实心*/
}
.模态标题，
.模态页脚{
填充：15px；
显示器：flex；
边界：没有！重要；
}
.模态标题{
/*边框底部：1px实心#eeeee*/
颜色：214761；
证明内容：之间的空间；
}
.模态页脚{
/*边框顶部：1px实心#eeeee*/
证明内容：柔性端；
}
.模态体{
位置：相对位置；
填充：20px 20px；
位置：相对位置；
填充：20px 10px；
边缘顶部：30px；
左边距：7px；
}
.btn关闭{
边界：无；
字体大小：20px；
填充：18px；
光标：指针；
字体大小：粗体；
颜色：214761；
背景：透明；
}
.btn绿色{
颜色：白色；
背景：#4AAE9B；
边框：1px实心#4AAE9B；
边界半径：2px；
}

这是父组件Vancancies.vue，用于接收数据并插入到作业列表中：

<template>
    <div id="page-wrapper" >
    <div id="page-inner">
        <div class="row">
            <div class="col-lg-12">
                <h2>My job vacancies</h2>
                <!--  if(count($positions) > 0) { echo "";} else{ echo "No positions for the moment!"; -->

            <button v-if="this.company_remaining_jobs > 0" @click="openJobCreateModal" type="button" class="btn btn-primary modal-primary" data-toggle="modal" data-target="#exampleModalLong" >Create position</button>

                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Created</th>
                            <th></th>
                        </tr>
                    </thead>
                     <tbody>
                         <tr v-for="job in jobs.jobs" :key="job.id" :job="job">
                            <td>{{job.name}}</td>
                            <td>{{moment(job.created_at).fromNow()}}</td>
                            <td style="text-align:center">
                                <button @click="openViewJobModal(job)" class="btn btn-large btn-success">View</button>
                                <button class="btn btn-large btn-primary">Edit</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
        </div>
        <!-- endif -->
            </div>
        </div>
        <Show v-if="viewJobModalVisible" :job="job" @closeRequest='closeJobViewModal'></Show>
        <Create v-if="createJobModalVisible" @closeCreateRequest='closeJobCreateModal' @newJob='getNewJob'></Create>
    </div>
</template>

<script>

    import axios from 'axios';
    import moment from 'moment';
    import Show from './Show.vue';
    import Create from './Create.vue';

    export default {

        data(){

            return {
                jobs: [],
                job: {id:'', name:'', description:'', salary:'', location:'', experience_years:'', bonus:'', expiration:'', created_at:''},
                viewJobModalVisible: false,
                createJobModalVisible: false,
                company_remaining_jobs: '',
                newJob:''
            }

        },

        methods:{

            getJobs(){
                axios.get('http://localhost:8888/fintechjobs.io/public/api/vacancies').then( response => {
                    this.jobs = response.data
                }).catch(e => {
                    console.log(e);
                })
            },

            getCompanyInfo(){
                axios.get('http://localhost:8888/fintechjobs.io/public/api/company_info').then(response =>{
                    this.company_remaining_jobs = response.data.company_remaining_jobs;
                })
            },

            moment,

            openViewJobModal(job){
                this.job = job;
                this.viewJobModalVisible = true;
            },

            closeJobViewModal(){
                this.job = '';
                this.viewJobModalVisible = false;
            },

            openJobCreateModal(){
                this.createJobModalVisible = true;
            },

            closeJobCreateModal(){
                this.createJobModalVisible = false;
            },

            getNewJob(value){
                console.log(value);
                this.jobs.push(value)
            }
        },

        mounted(){
            this.getJobs();
            this.getCompanyInfo();
        },

        components:{
            Show,
            Create
        }


    }
</script>

我的职位空缺
创建位置
标题
创建
{{job.name}
{{时刻（job.created_at）.fromNow（）}
看法
编辑
从“axios”导入axios；
从“力矩”中导入力矩；
从“/Show.vue”导入显示；
从“/Create.vue”导入创建；
导出默认值{
数据（）{
返回{
职位：[]，
职务：{id:''，姓名：''，描述：''，工资：''，地点：''，工作年限：''，奖金：''，有效期：''，创建时间：'}，
viewJobModalVisible:false，
createJobModalVisible:false，
公司剩余职位：''，
新建作业：“”
}
},
方法：{
getJobs（）{
axios.get（）http://localhost:8888/fintechjobs.io/public/api/vacancies）。然后（响应=>{
this.jobs=response.data
}).catch（e=>{
控制台日志（e）；
})
},
getCompanyInfo（）{
axios.get（）http://localhost:8888/fintechjobs.io/public/api/company_info）。然后（响应=>{
this.company_remaining_jobs=response.data.company_remaining_jobs；
})
},
那一刻，
openViewJobModal（作业）{
这个工作=工作；
this.viewJobModalVisible=true；
},
closeJobViewModal（）{
this.job=''；
this.viewJobModalVisible=false；
},
OpenJobCreateModel（）{
this.createJobModalVisible=true；
},
CloseJobCreateModel（）{
this.createJobModalVisible=false；
},
getNewJob（值）{
console.log（值）；
this.jobs.push（值）
}
},
安装的（）{
这是getJobs（）；
这个.getCompanyInfo（）；
},
组成部分：{
显示
创造
}
}

奇怪的是，这就是我如何在控制台上看到刚刚创建的数据和错误：

---

我认为问题在于你最初的

ge