vue-axios 输入参数获取数据的写法

<template>
  <div class="nav">
    <input v-model="name" type="text" />

    <button @click="Delete()">查询</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DleteView",
  data() {
    return {
      name: [],
    };
  },
  methods: {
    Delete() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/delete`,
        // URL中的查询参数

        params: {
          id: this.name,
        },
      }).then(function (result) {
        this.name = result.data;
      });
    },
  },
};
</script>

<style>
.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>

 

 

<template>
  <div class="nav">
    <input v-model="count" type="text" />
    <div v-for="item in name" :key="item.id">
      <div class="navs">
        <label for="#">账号:</label>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ item.id }}</span
        >&nbsp;&nbsp; <label for="#">部门:</label> &nbsp;&nbsp;&nbsp;
        <span>{{ item.locationString }}</span
        >&nbsp;&nbsp; <label for="#">名字:</label>&nbsp;&nbsp;&nbsp;
        <span>{{ item.name }}</span>
      </div>
    </div>
    <button @click="Delete()">查询</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DleteView",
  data() {
    return {
      count: [],
      name: [],
    };
  },

  methods: {
    Delete() {
      axios({
        // 请求方式
        method: "GET",
        // 请求地址
        url: `http://localhost:8086/delete`,
        // URL中的查询参数
        params: {
          id: this.count,
        },
      }).then((result) => {
        console.log(result.data);
        this.name = result.data;
      });
    },
  },
};
</script>