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