javascript - Vue从选择框@changed后删除当前数据值

Question

我有一个查询，它获取一条记录并将其显示到图表中。我已经可以显示记录，但是当我单击没有结果的记录，然后单击上一条有结果的记录时。 vue 中的 data 属性添加当前结果以追加前一个结果。我想要的是，当我从 select 标记中选择另一个选项时，当前数据将被删除，并将用新结果替换为当前结果。

这是我的图表

当我从选择框中单击Vince 时，我得到了准确的数据和图表。这是我的 Vue 开发工具详细信息

但是当我点击标记时，第二位老师没有数据或结果

我以前的数组中的数据仍然在那里，当我点击返回到其中有数据的 vince 时，结果就是结果

图表是这样的

我现在的代码不起作用

   getdata() {
                    let self = this
                    axios.get('/getGraph/' + self.teacher)
                        .then(({
                            data
                        }) => {
                            if(data.length > 0){
                                data.splice()
                            }
                            else{
                                data.date.forEach(x => {
                                self.dataSource.data.push(x);
                            });
                            }
                        })
                }

我原来的代码是这样的

     getdata() {
                    let self = this
                    axios.get('/getGraph/' + self.teacher)
                        .then(({
                            data
                        }) => {
                            data.date.forEach(x => {
                                self.dataSource.data.push(x);
                            });
                        })
                },
                getTeachers() {
                    axios.get('getTeachers')
                        .then((res) => {
                            this.teachers = res.data
                        })
                        .catch((e) => {
                            console.log(e)
                        })
                }

有人可以告诉我出了什么问题以及我怎样才能实现我想做的事情吗？多谢。

Answer 1

每次从服务器收到这样的数据时，您都必须清除数据。

 axios.get('/getGraph/' + self.teacher)
        then(({
                            data
        }) => {
        self.dataSource.data = []
        data.date.forEach(x => {
            self.dataSource.data.push(x);
        });
 })