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>

Vue - 从 REST 实时获取数据 API

Vue - real-time fetching of data from REST API

javascript

real-time-data

vue.js

vue-resource