Question

我正在使用Vue创建博客类型的应用程序，而我试图做的事情之一就是使用户能够对帖子发表评论。我在使用api PUT请求将评论添加到帖子时遇到了麻烦。这是设置上下文的方式。

postSchema：

const postSchema = new mongoose.Schema({
    title:  {
        type: String,
        required: true
    },
    userPosted: {
        type: String,
    },
    datePosted: {
        type: Date,
        required: true,
        default: Date.now()
    },
    course: {
        type: String,
        default: ''
    },
    professor: {
        type: String,
        default: ''
    },
    post: {
        type: String,
        required: true
    },
    comments:
        [{
            commentedBy: {
                type: String
            },
            commentdate:{
                type: Date,
                default: Date.now()
            },
            usercomment: {
                type: String
            }
        }],
    likes: {
        type: Number,
        default: 0
    }
})

发布用于PUT请求的api

router.put('/:id', async (req,res) => {
    try{
        //find post by id, update using request body, return updated post to 
        Post.findByIdAndUpdate({_id: req.params.id}, req.body).then(function(){
            //find updated post
            Post.findOne({_id: req.params.id}).then(function(post){
                res.send(post)
            }) 
        })
    } catch(err){
        res.send(err)
    }
})

评论部分页面

  <form action="" v-if="isLoggedIn">
      <div class="d-flex bd-highlight">
           <!-- comment input field -->
           <div class="p-2 flex-grow-1 bd-highlight">
              <input type="text" class="form-control" placeholder="Comment here...">
           </div>
           <!-- submit button -->
           <div class="p-2 bd-highlight">
               <button class="btn btn-outline-dark">done</button>
           </div>
      </div>
  </form>
  <hr v-if="isLoggedIn">

  <!-- Comment section -->
  <h4 class="card-title">Comments</h4>
  <!-- single comment -->
  <div class="single-comment" v-for="(comment, i) in post.comments" :key="i">
  <!-- comment information -->
  <h6 class="card-subtitle mb-2 text-muted">Posted {{moment(comment.commentdate).fromNow()}} by {{comment.commentedBy}}</h6>
   <!-- comment content -->
   <p class="card-text comment-content">{{comment.usercomment}}</p>


</template>

<script>
export default {
    data() {
        return {
            id: this.$route.params.id,
            post: []
        }
    },
    async created() {
        return this.$http.get('http://localhost:3000/posts/' + this.id)
        .then(res => {
            this.post = res.data
        })
    }
}
</script>

如您所见，我使用嵌套在帖子中的评论对它进行建模，因此我在发表评论时从技术上编辑帖子。该请求在邮递员中工作正常，因此后端设置正确，但是我在使用Vue完成我想要的操作时遇到了麻烦。

这是评论部分的样子。

Answer 1

在评论表单中，您可以在用户输入内容时利用组件中的局部变量来保存评论。我们还为按钮添加了一种方法，以在单击时执行操作：

  <form action="" v-if="isLoggedIn">
      <div class="d-flex bd-highlight">
           <!-- comment input field -->
           <div class="p-2 flex-grow-1 bd-highlight">
              <input type="text" class="form-control" placeholder="Comment here..." v-model="currentComment">
           </div>
           <!-- submit button -->
           <div class="p-2 bd-highlight">
               <button class="btn btn-outline-dark" @click="submitComment">done</button>
           </div>
      </div>
  </form>

然后，在组件的脚本部分：

<script>
export default {
    data() {
        return {
            currentComment: "", // Bucket for holding the comment temporarily
            id: this.$route.params.id,
            post: []
        }
    },
    async created() {
        return this.$http.get('http://localhost:3000/posts/' + this.id)
        .then(res => {
            this.post = res.data
        })
    }
    methods: {
        /* Our submit method for comments */
        async submitComment() {
            this.post.comments.push({
                commentedBy: /*The current user, wherever that is stored*/,
                commentdate: Date.now(),
                usercomment: this.currentComment // Our temporary value
            });
            return this.$http.put('http://localhost:3000/posts/' + this.id, this.post)
            .then(res => {
                /* Do some messaging and cleanup here (like emptying currentComment) */
            })
        }
    }
}
</script>

在您的示例中，您没有显示当前用户来自哪里，因此commentedBy将为您做一些工作，以将数据放入正确的位置。

使用放置请求在Vue

1 个答案: