Vue.js 中的 Http.Post 对象未发布正确数据答案

【问题标题】：Http.Post in Vue.js with Object not posting correct dataVue.js 中的 Http.Post 对象未发布正确数据
【发布时间】：2020-02-10 06:49:28
【问题描述】：

我有一个 Vue.js 应用程序，如下所示

    var vueCommentApp = new Vue({
            el: '#Commentdiv',           
            data: {
                 newComment:{"userCommentID":0,"siteurlID":1,"userId":"","userName":"Guest","commentPageType":"","commentDesc":null,"parentUserCommentID":null,"islast":false,"isApproved":false,"isActive":false,"addedDate":"0001-01-01T00:00:00"}                
                  }
            ,
            methods: {          
                SaveComment: function () {
                     this.$http.post('/Comment/AddComment', this.newComment ).then(result => {                   
                       //Success 
                    }, error => {
                        console.error(error);
                    });
                }
            }
        });

我的 Html 如下所示

<div id="Commentdiv">
                <p>                    
                    <input id="Email" placeholder="Write your Email here!" type="email" class="form-control " v-model.lazy="newComment.userId" />
                </p>
                <p>                  
                    <input id="UserName" placeholder="Write your name here!" type="text" class="form-control " v-model.lazy="newComment.userName" />
                </p>
                <p>                   
                    <textarea id="Comment" placeholder="Write your comment here!" class="pb-cmnt-textarea form-control" v-model.lazy="newComment.commentDesc"></textarea>
                </p>
                <p><button class="btn btn-primary pull-right" v-on:click="SaveComment" type="button">Share</button></p>
</div>

当用户点击分享按钮时，Savecomment Function 被执行并调用 API。但是 API 没有获取用户输入的数据，而是填充了默认值

      [HttpPost]
        public IActionResult AddComment(UserCommentVm newComment)
        {
            //return Json(this.commentRepository.AddComment(NewComment));
            return Json("");
        }

而且我的 Viewmodal 和从视图完全一样

 public class UserCommentVm
    {      
        public int userCommentID { get; set; }
        public int siteurlID { get; set; }    
        public String userId { get; set; }    
        public String userName { get; set; }    
        public String commentPageType { get; set; }
        public String commentDesc { get; set; }    
        public int? parentUserCommentID { get; set; }    
        public Boolean islast { get; set; }    
        public Boolean isApproved { get; set; }    
        public Boolean isActive { get; set; }    
        public DateTime addedDate { get; set; }
    }

【问题讨论】：

你能不能尝试只使用 v-model 而不是 v-model.lazy。使用惰性只会更新更改事件的原始值。并在 saveComment 方法中控制台 userComment 并检查值。
已经删除了lazy..also console.log(JSON.stingify(newcomment)) 给出了 {"userCommentID":0,"siteurlID":1,"userId":"Sreeath.sreeganga@gmail. com","userName":"Sreeath.sreeganga","commentPageType":"Question","commentDesc":null,"parentUserCommentID":null,"islast":false,"isApproved":false,"isActive":false ,"addDate":"0001-01-01T00:00:00"}
什么是this.$http？你在用vue-resource吗？如果你改用Axios，你有同样的问题吗？

标签： http vue.js asp.net-core-mvc

【解决方案1】：

{"userCommentID":0,"siteurlID":1,"userId":"Sreeath.sreeganga@gmail.com","userName":"Sreeath.sreeganga","commentPageType":"Question","commentDesc":null,"parentUserCommentID":null,"islast":false,"isApproved":false,"isActive":false,"addedDate":"0001-01-01T00:00:00"}

正如我在此回复中看到的，您的值已经针对您使用 v-model 的键进行了更新。（电子邮件，姓名）

由于您尚未更新其他键的值，因此正在传递默认值。

请注意，v-model 只会更新原始对象 newComment 的键值，因此如果在传递给 api 时未更新，默认设置的值将被设置为默认值.

【讨论】：

我知道这些值是在客户端设置的..对不起，我没有明确提到在服务器端操作中没有正确更新的值..请看图片

【解决方案2】：

我的问题是 vue.resources 中的 $http.post（不确定它是什么）将它转换为 Axios 并且它现在可以工作

 SaveComment: function () {        
            axios({
                url: '/Comment/AddComment',
                method: 'post',
                contentType: "application/json; charset=utf-8",
                data:   this.newComment,  
            }).then(response => {
                console.log(response);
                }).catch(error => {
 console.log(error);
                });            
            }

【讨论】：