Vue - 从 REST API 实时获取数据

Question

所以，我有一个输入供用户输入他的用户名。用户名通过 v-model 绑定到 vue 实例。

我在控制器中制作了这个函数来检查用户名是否唯一(经过测试并且可以正常工作(：

/**
 * @description
 * GET /api/account/unique/username/:username
 * Checks if new user signing up has a unique username
 */
module.exports.isUsernameUnique = function isUsernameUnique(req, res, next) {
  const username = req.params.username;
  if(!username) {
    return res.status(400).send({ message: 'Username is missing.' });
  }
  personRepository.findPersonByUsername(username, (err, person) => {
    if(person) {
      return res.status(400).send({ message: 'Username has already been taken.' });
    } else {
      res.status(200).send({ unique: true });
    }
  });
};

在我的 vue 脚本中：

data: {
    username: ''
},
methods: {
  isUsernameUnique: function() {
    var self = this;
    var url = 'api/account/unique/username/' + self.username;
    self.$http.get(url)
      .then(function(res){
      }, function(err){
      });
  }
}

如果用户键入的用户名不是唯一的，则输入下方的范围应几乎立即显示错误消息。我该如何实现此目的？

Answer 1

您可以在 data(( 中添加一个初始值为 false 的标志变量，一旦来自 api 的响应给出结果，该变量将变为 true，因为用户名是唯一的。

请查看以下代码更改：

data: {
    username: '',
    isUniqueUserName: false
    },
methods: {
  isUsernameUnique: function() {
    var self = this;
    var url = 'api/account/unique/username/' + self.username;
    self.$http.get(url)
      .then(function(res){
         if(res.unique) this.isUniqueUserName = true;
      }, function(err){
      });
  }
}

在你的跨度中添加这个

<span v-if="!isUniqueUserName ">User Name is Not Unique</span>