Vue.js 从一个Vue组件发送到另一个Vue组件的数据保持反应状态

我有一个输入组件，它有一个收集开始和完成时间、作业编号和选择选项的表单

这将附加到具有v-model的数据特性

然后，这将与事件一起发出。$emit（'addedata'，This.hours）

在显示组件中，Event.$on获取此数据并检查一个属性，然后基于此检查将其添加到另一个数据属性（数组）中，并使用此.todays\u hours.push（）

然后，模板会在模板中使用v-for以反应方式显示此信息

在这一点上，一切都很好。然而，当我尝试添加另一行小时数时，已经显示的小时数会随着输入发生反应性变化

如果我重新加载页面，我的输入组件也会通过axios发布到数据库，所有内容都会正确显示

输入组件

<template>
   <div>
        <div class="row">
            <div class="col-2">
                <input hidden="" v-model="hours.day">
            </div>
            <div class="col-2" >
                <input type="time" v-model="hours.start">
            </div>
            <div class="col-2" >
                <input type="time" v-model="hours.finish">
            </div>
            <div class="col-2" >
                <input type="number" v-model="hours.job_number">
            </div>
            <div class="col-2" >
                <select v-model="hours.climbing">
                    <option selected="selected" value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
            <div class="col-2" >
                <button @click="onSave" class="btn-success btn-sm">Save</button>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'InputHoursComponent',

        props: ['employeeId', 'dayCheck', 'weekEnding'],

        data() {
            return {
                hours: {
                    start: "",
                    finish: "",
                    job_number: "",
                    climbing: 0,
                    day: this.dayCheck
                },
                climbing_select: ['No', 'Yes'],
            }
        },

        methods: {
            onSave()
            {
                axios.post('/payroll', {
                    employee_id: this.employeeId,
                    week_ending: this.weekEnding,
                    start: this.hours.start,
                    finish: this.hours.finish,
                    job_number: this.hours.job_number,
                    climbing: this.hours.climbing,
                    day: this.dayCheck
                })
                .then(response => {})
                .catch(e => {this.errors.push(e)});

                let data = this.normalizeProp(this.hours, s, true)
                Event.$emit('onAddedEntry', data);

                console.log("passed data:", this.hours);


            }
        }
    }
</script>

<template>
    <div>
        <div v-for="item in todays_hours">
            <div class="row">
                <div class="col-2">
                    <div hidden="" ></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.start"></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.finish"></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.job_number"></div>
                </div>
                <div class="col-2" >
                    <div v-text="(item.climbing)?'Yes':'No'"></div>
                </div>
                <div class="col-2" >
                    <button @click="onEdit" class="btn-warning btn-sm mb-1">Edit</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DisplayHoursComponent',

        props: ['dayCheck', 'hoursWorked'],

        data() {
            return {
                hours_list: this.hoursWorked,
                todays_hours: []
            }
        },

        mounted() {
            for (var i = 0; i < this.hours_list.length; i++) {
                if (this.hours_list[i].day === this.dayCheck) {
                    this.todays_hours.push(this.hours_list[i])
                }
            }

            Event.$on('onAddedEntry', (check) => {
                if(check.day === this.dayCheck){
                    this.todays_hours.push(check);
                }
            })
        },

        methods: {
            onEdit()
            {

            }
        }
    }
</script>

不
对
拯救

导出默认值{
名称：“InputHoursComponent”，
道具：['employeeId'，'dayCheck'，'weekEnding'，]，
数据（）{
返回{
工作时间：{
开始：“，
完成：“，
职位编号：“，
爬升:0,，
day:这是dayCheck
},
攀爬选择：[“否”、“是”]，
}
},
方法：{
onSave（）
{
axios.post（“/payroll”{
员工id:this.employeeId，
周末结束：这个周末，
开始：这个。小时。开始，
完成：这个。小时。完成，
工作编号：this.hours.job\u number，
攀岩：这个。小时。攀岩，
day:这是dayCheck
})
。然后（响应=>{}）
.catch（e=>{this.errors.push（e）}）；
让data=this.normalizeProp（this.hours，s，true）
事件。$emit（'onAddedEntry'，数据）；
log（“传递的数据：”，this.hours）；
}
}
}

显示组件

<template>
   <div>
        <div class="row">
            <div class="col-2">
                <input hidden="" v-model="hours.day">
            </div>
            <div class="col-2" >
                <input type="time" v-model="hours.start">
            </div>
            <div class="col-2" >
                <input type="time" v-model="hours.finish">
            </div>
            <div class="col-2" >
                <input type="number" v-model="hours.job_number">
            </div>
            <div class="col-2" >
                <select v-model="hours.climbing">
                    <option selected="selected" value="0">No</option>
                    <option value="1">Yes</option>
                </select>
            </div>
            <div class="col-2" >
                <button @click="onSave" class="btn-success btn-sm">Save</button>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'InputHoursComponent',

        props: ['employeeId', 'dayCheck', 'weekEnding'],

        data() {
            return {
                hours: {
                    start: "",
                    finish: "",
                    job_number: "",
                    climbing: 0,
                    day: this.dayCheck
                },
                climbing_select: ['No', 'Yes'],
            }
        },

        methods: {
            onSave()
            {
                axios.post('/payroll', {
                    employee_id: this.employeeId,
                    week_ending: this.weekEnding,
                    start: this.hours.start,
                    finish: this.hours.finish,
                    job_number: this.hours.job_number,
                    climbing: this.hours.climbing,
                    day: this.dayCheck
                })
                .then(response => {})
                .catch(e => {this.errors.push(e)});

                let data = this.normalizeProp(this.hours, s, true)
                Event.$emit('onAddedEntry', data);

                console.log("passed data:", this.hours);


            }
        }
    }
</script>

<template>
    <div>
        <div v-for="item in todays_hours">
            <div class="row">
                <div class="col-2">
                    <div hidden="" ></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.start"></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.finish"></div>
                </div>
                <div class="col-2" >
                    <div v-text="item.job_number"></div>
                </div>
                <div class="col-2" >
                    <div v-text="(item.climbing)?'Yes':'No'"></div>
                </div>
                <div class="col-2" >
                    <button @click="onEdit" class="btn-warning btn-sm mb-1">Edit</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DisplayHoursComponent',

        props: ['dayCheck', 'hoursWorked'],

        data() {
            return {
                hours_list: this.hoursWorked,
                todays_hours: []
            }
        },

        mounted() {
            for (var i = 0; i < this.hours_list.length; i++) {
                if (this.hours_list[i].day === this.dayCheck) {
                    this.todays_hours.push(this.hours_list[i])
                }
            }

            Event.$on('onAddedEntry', (check) => {
                if(check.day === this.dayCheck){
                    this.todays_hours.push(check);
                }
            })
        },

        methods: {
            onEdit()
            {

            }
        }
    }
</script>

编辑
导出默认值{
名称：'DisplayHoursComponent'，
道具：['dayCheck'，'hoursWorked'，]，
数据（）{
返回{
小时数列表：这个。工作小时数，
今天的工作时间：[]
}
},
安装的（）{
对于（变量i=0；i{
如果（check.day==此.dayCheck）{
这个。今天的时间。推（检查）；
}
})
},
方法：{
onEdit（）
{
}
}
}

---

有人能帮我吗？

试着推送一份

check

的副本，而不是

check

本身

Event.$on('onAddedEntry', (check) => {
  if(check.day === this.dayCheck){
    this.todays_hours.push({...check});
  }
})

---

您也可以在发出事件时进行复制。

您可以更改组件的体系结构：有一个组件（例如，

WorkHoursComponent.vue

，其中包含1个“InputHoursComponent”和1个“DisplayHoursComponent”。然后根据需要经常使用“WorkHoursComponent”（在您的示例中，1个组件将是1个包含2行的部分）在视图中。这使得每个部分的数据（输入数据和显示数据）每天都“私有”。我不确定是否已解释了我的问题。我正在尝试停止任何连续条目更新显示组件中已创建的条目。您是个天才。谢谢。