javascript - 如何从NodeJS获取单个数据并在VueJS中显示？

Question

我创建了一个包含用户详细信息的数据库，我希望通过搜索其名字来显示我的 VueJS。

下面是我的代码，用于请求 JSON 中的用户详细信息。它正在工作，所以我的下一步将是在我的 VueJS 中显示数据。

http://localhost:9000/api/user/:id

我的 VueJS 上有这样的东西

export default {
  data() {
    return {
      search: "",
      results: {}
    };
  },

  mounted() {
    this.getUsers();
  },
  methods: {
    getUser() {
      axios
        .get("http://localhost:9000/api/user/")
        .then(response => (this.results = response.data))
        .catch(error => alert(error));
    }
  },

  computed: {
    /* Search Bar */
    filteredPeople() {
      if (this.search) {
        return this.results.filter(result => {
          return result.First_Name.toLowerCase().startsWith(
            this.search.toLowerCase()
          );
        });
      } else {
        return this.results;
      }
    }
  },
};
</script>

为了显示它，我创建了这样的东西

<div v-for="result in results" :key="result.id">
  <input type="text" v-model="search" placeholder="Search by name" />
  {{result.First_Name}}
  {{result.Last_Name}}
</div>

这是我的 Nodejs 查询来请求特定用户

//gets a specific user based on their ID
router.get('/user/:id', function (req, res) {
    let sql = "SELECT * FROM MEMB WHERE id = ?";
    myDB.query(sql, req.params.id, function (err, rows) {
        if (err) {
            console.log("Your query has error."+ err);
        } else {
            console.log(rows);
            res.send(rows);
        }
    });
});

Answer 1

尝试像这样更改getUser():

getUser() {
  let self = this;
  axios
    .get("http://localhost:9000/api/user/", {
      params: {
        id: 12345
      }
    })
    .then(response => (self.results = response.data))
    .catch(error => alert(error));
}