javascript - Vue - 从 REST API 实时获取数据

Question

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

我在 Controller 中创建了此函数来检查用户名是否唯一(经过测试并且有效):

/**
 * @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>