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));
}

Answer 2

只需解决以下问题：

请检查以下内容： https://bootstrap-vue.js.org/docs/components/table#complete-example

它具有准备就绪的功能，可以按名称搜索bootstrap-vue。您所要做的就是：

放置一张boost-vue桌子
将一系列用户从API返回到axios响应
将项目设置为用户数组

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

2 个答案: