请忽略样式，只讲功能哦
<template>
<section>
<h1>博客</h1>
<form v-if="!flag">
<p>博客标题</p>
<input type="text" id="" value="" v-model="boke.biaoti" required="required"/>
<p>博客内容</p>
<textarea name="" rows="" cols="" v-model="boke.con"></textarea>
<input type="checkbox" name="" id="" value="1" v-model="boke.one"/>
<label>1</label>
<input type="checkbox" name="" id="" value="2" v-model="boke.one"/>
<label>2</label>
<input type="checkbox" name="" id="" value="3" v-model="boke.one"/>
<label>3</label>
<input type="checkbox" name="" id="" value="4" v-model="boke.one"/>
<label>4</label>
<input type="checkbox" name="" id="" value="5" v-model="boke.one"/>
<label>5</label>
<label>作者</label>
<select v-model="boke.autha">
<option v-for="autha in auth">
{{autha}}
</option>
</select>
</form>
<div>
<h3>博客总览</h3>
<p>博客标题</p>
{{boke.biaoti}}
<p>类别</p>
<ul>
<li v-for="intm in boke.one">
{{intm}}
</li>
</ul>
<p>博客内容</p>
{{boke.con}}
<label>作者：{{boke.autha}}</label>
<button @click.prevent="post">发博客</button>
</div>
<div v-if="flag" style="color: red;">
<p>你的博客发布成功</p>
</div>
</section>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import axios from 'axios'
export default {
name: 'itemcontainer',
data () {
return {
boke:{
'bioati':null,
"con":null,
"one":[],
"autha":""
},
"auth":["er","erfs","rtr"],
"flag":false
}
},
methods:{
post(){
var _this=this;
axios.post('http://jsonplaceholder.typicode.com/posts', {
title:this.boke.biaoti,
body: this.boke.con,
userId:1
})
.then(function (response) {
_this.flag = true;
console.log(response);
})
.catch(function (error) {
});
}
}
}
</script>
<style lang="less" scoped>
input{
color: red;
}
</style>
网友评论