Question

如果用户没有输入任何内容，我想阻止。我试过这样但不起作用：

 if(this.comment === ' '){
       return;
  }

这是我的整个方法：

 postComment: function(user_id,article_id) {
                if(this.comment === ' '){
                  return;
                }
                else{
                var article_comments = {
                  title: this.comment,
                  upovotes: this.article_comments.upovotes,
                  downvotes: this.article_comments.downvotes,
                  user_id : user_id,
                  article_id: article_id
                };

                  this.comments.push({
                      title: this.comment,
                      downvotes: 0,
                      upvotes: 0
                    })

                    this.$http.post('/blog/article/' + article_id + '/comment', article_comments).then(function(response){

                    },function(response){

                  });

                }
                this.comment = "";
              },

在视图中我有这个：

  <div class="col-md-11 col-sm-11 col-xs-11">
     <textarea  class="comment_input" placeholder="Join the discussion..." v-model="comment" @keyup.enter="postComment({{$current_user->id}},{{ $article->id}})"></textarea>
 </div>

Answer 1

首先，您正在检查' '，这不是空白文本，而是空格。如果要检查空白文本，则为

if(this.comment === '')

或

if(this.comment.length == 0)

其次，你应该在输入之前和之后修剪空格：

if(this.comment.trim() === '')

或者，从Vue 2.0+开始，您可以直接在标记中使用trim input modifier：

<textarea v-model.trim="comment" ...>

最后但并非最不重要的一点是，您应该听取keydown而不是keyup事件，以便在您按键时获得输入，而不是在键已经存在之后通过添加新行修改输入。由于您希望自己处理此事件，因此应该阻止默认操作：

<textarea @keydown.enter.prevent="postComment()" ...>

检查v-model是否为空？

1 个答案: