首页 > 其他 > 详细

vuex 如何取到input中的值并放到全局store,并且发请求到后端

时间:2019-11-26 16:15:23      阅读:776      评论:0      收藏:0      [点我收藏+]

1.监听input输入框 titleHandler

   <div>
        <!-- 监听input输入框 titleHandler-->
       <input type="text" class="input" v-model="titleHandler"> <button class="btn btn-success" @click="addOneNote">提交</button>
              
  </div>

技术分享图片

 

 2.定义计算属性

  computed: {
    //  使用计算属性,如果赋值 我就赋值给 $store.state.note.title 
    // 如果我要打印这个属性的时候,将执行我的 get方法 渠道title值
      titleHandler:{
        set:function(newValue){
         this.$store.state.note.title = newValue

        },
        get:function(){
          return this.$store.state.note.title


        }
}

技术分享图片

 3.执行提交事件之后

  // 方法
    methods:{
      addOneNote(){
        var json = {
          // 取到属性并赋值给title
          title:this.titleHandler,
          markdown:this.markdownHandler,
          counttet:this.$refs.t.innerText,

        }

技术分享图片

 

 4.向后端发请求

   // 向后端提交数据
        $.ajax({
          url:‘api/api/comments/‘,
          //请求的类型(注意)
          contentType: ‘application/json;charset=utf-8‘,
          type:‘post‘,  
          data:JSON.stringify(json), 
          success:function(data){
            console.log(data)
    
          },
          error:function(err){
            console.log(err)
          }

技术分享图片

 

 

 

 注意点:

 // $.ajax 下面是取不到this.$store.state.allList 所以我们要自己赋值一个全局组件this让它去改变store中的值
        var _this = this;

技术分享图片

 

 

 

 

 

vuex 如何取到input中的值并放到全局store,并且发请求到后端

原文:https://www.cnblogs.com/Rivend/p/11935566.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!