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

因此，我为用户输入了一个用户名。用户名通过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){
      });
  }
}

---

如果用户键入的用户名不是唯一的，则应在输入下方显示一个范围，并几乎立即显示一条错误消息。如何实现这一点？

您可以在数据中添加一个初始值为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>