push一个对象数据不显示

这个添加数据之后显示一下就又跳没有了是咋回事

<body>
    <div id="app" class="score-table">
        <form>
            <div class="form-item">
                <div class="subject">
                    科目：
                    <input v-model.trim="subject" type="text" placeholder="请输入科目">
                </div>
                <div class="score">
                    分数：
                    <input v-model.number="score" type="text" placeholder="请输入分数">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button @click="formSubmit" class="submit">添加</button>
            </div>
        </form>
        <table class="score-case">
            <thead class="header">
                <tr>
                    <th>编号</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-if="list.length >0" class="body">
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{index + 1}}</td>
                    <td>{{item.subject}}</td>
                    <td :class="{ red: item.score<60}">{{item.score}}</td>
                    <td colspan="4">
                        <a @click.prevent="del(item.id)" href="#">删除</a>
                    </td>
                </tr>
            </tbody>
            <tbody v-else="list.length==0">
                <tr>
                    <td colspan="4" rowspan="3">暂无数据</td>
                </tr>
            </tbody>
            <tfoot class="foot">
                <tr>
                    <td colspan="4">总分：{{getTotal}}分 平均分：{{getAverage}}分</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script src="../js/vue.global.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    list: [
                        { id: 1, subject: '语文', score: 80 },
                        { id: 2, subject: '数学', score: 90 },
                        { id: 3, subject: '英语', score: 75 },
                    ],
                    subject: '',
                    score: ''
                }
            },
            methods: {
                del(id) {
                    // console.log(1);
                    this.list = this.list.filter(item => item.id != id)
                },
                formSubmit() {
                    if (!this.subject) {
                        alert('请输入科目！')
                        return
                    }
                    if (typeof this.score !== 'number') {
                        alert('请输入正确的分数！')
                        return
                    }
                    this.list.push({
                        id: +new Date(),
                        subject: this.subject,
                        score: this.score
                    })

                },
            },
            computed: {
                getTotal() {
                    return this.list.reduce((sum, item) => sum + item.score, 0)
                },
                getAverage() {
                    if (this.list.length === 0) {
                        return 0
                    }
                    return (this.getTotal / this.list.length).toFixed(2)
                }
            }
        }).mount('#app')
    </script>
</body>

看看数据是否变化了，看代码没啥问题。感觉可能是重新刷新了这个页面，添加进去后，数据又重置了。list应该是变化了

代码发全

 表单校验不够严格，只检测了科目是否为空和分数是否为数字，但没有限制分数在合理范围内；
 添加科目和分数时没有清空输入框，容易造成用户误输入；
 计算总分和平均分时，没有对分数进行合法性判断和异常处理；
 在删除某一项数据时，没有对用户进行确认提示，容易误删数据。

【相关推荐】

你可以看下这个问题的回答https://ask.csdn.net/questions/7436649
这篇博客也不错, 你可以看下循环for数据点击一个push一次里面有的覆盖没有的添加进去

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

push一个对象 数据不显示

push一个对象数据不显示