从一个 Vue 组件发送到另一个组件的数据仍然是响应式的

Question

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

这是通过 v-model 附加到数据属性的。

然后用 Event.$emit('addedData', this.hours) 发出这个

在显示组件中，Event.$on 获取此数据并检查一个属性，并根据检查将其添加到另一个数据属性（数组）中 this.todays_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>

有人可以帮帮我吗？

Answer 1

尝试推送check 的副本，而不是check 本身。

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

您也可以在发出事件时制作副本。