vue-axios更改操作

<template>
  <div class="nav">
    <label for="">新部门</label><input v-model="location" type="text" />
    <label for="">旧部门</label><input v-model="OldLocation" type="text" />
    <input @click="Updata()" value="更改" type="button" />
    <h4 v-if="font === 4">更改成功，但是不晓得你数据库有没有前置部门条件;</h4>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "UpdateView",
  data() {
    return {
      location: [],
      OldLocation: [],
      font: [],
    };
  },

  methods: {
    Updata() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/Update`,
        // URL中的查询参数
        params: {
          location: this.location,
          OldLocation: this.OldLocation,
        },
      }).then((res) => {
        console.log(res);
        this.font = 4;
      });
    },
  },
};
</script>
<style>
label {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
  margin-right: 10px;
}

input {
  margin-left: 10px;
  margin-right: 10px;
}

.navs {
  margin-top: 10px;
}
.nav {
  border-top: 3px solid #ff8500;
  background-color: #fcfcfc;
  border-bottom: 1px solid #edeeed;
  line-height: 41px;
}
.nav a {
  display: inline-block;
  height: 41px;
  padding: 0px 10px;
  font-size: 15px;
  color: #4c4c4c;
  font-family: "微软雅黑";
  text-decoration: none;
}
.nav a:hover {
  background: #edeeed;
  color: #ff8500;
}
</style>