Question

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

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

然后将其与Event。$ emit（'addedData'，this.hours）一起发出

在显示组件中，Event。$ on获取此数据并检查一个属性，并根据检查将其添加到具有this.todays_hours.push（）的另一个数据属性（数组）中。

模板然后使用模板中的v-for对此进行反应。

到目前为止，一切正常。但是，当我随后尝试添加其他小时数时，已经显示的小时数会随着输入的变化而变化。

当我重新加载页面时，由于我的输入组件也使用axios发布到数据库，因此所有显示正确。

input-component

<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});
  }
})

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

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

1 个答案: