解决Vue按钮点击多次，数据重复提交问题

方法一：

<template>

    <div class="blogboard">

        <h3>添加博客</h3>

        <form class="bodys" v-if="!blog.submmit">

            <label class="titles">标题</label>

            <input class="inputs" v-model="blog.title">

            <label  class="titles">内容</label>

            <textarea v-model="blog.content"></textarea>

            <label  class="titles">分类</label>

            <div class="tablein">

            <input type="checkbox" v-model="blog.belong" value="蔡小葵">蔡小葵

            <input type="checkbox" v-model="blog.belong" value="yyqx">yyqx

            </div>

            <button  @click="postblog()" :disabled="blog.isDisable"  >

            <!--postblog()是方法名，   blog.isDisable 是变量名，     :disabled 表示被禁用 ，blog.isDisable=true是禁用状态，blog.isDisable=false 是解除禁用  -->

                提交

            </button>

         

        </form>

        <h4>博客总览</h4>

        <p>标题:{{blog.title}}</p>

        <p>内容：{{blog.content}}</p>

        <p>分类：{{blog.belong}}</p>

    </div>

</template>

<script>

  

export default {

  

    data(){

        return{

            blog:{

                title:'',

                content:'',

                belong:[],

                isDisable:false,  //blog.isDisable变量的初始值

            }

        }

    },

    methods:{

        postblog(){

            this.blog.isDisable = true,

             setTimeout(() => {

             this.isDisable = false

             }, 10000)

            this.$http.post("http://jsonplaceholder.typicode.com/posts",

            {

                title:this.blog.title,

                body:this.blog.content,

                userId:this.blog.belong,

 

            }

            ).then(function(data){

                console.log(data);

            }

            );

         

        }

    },

}

</script>

 

 

 

 

方法二：

通过自定义指令

全局指令使用Vue.directive（）方法，

// 注册一个全局自定义指令`v-postblog`

Vue.directive('postblog', {

// 当被绑定的元素插入到 DOM 中时……

inserted: function (el) {

// 聚焦元素

el.postblog()

}

})

 

 

 

局部指令使用directives

 

directives: {

postblog: {

// 指令的定义

inserted: function (el) {

el.postblog() }

}

}