<template>
<div id="add-blog">
<h2>添加博客</h2>
<form v-if="!submmited" >
<label>博客标题</label>
<input type="text" v-model="blog.title"/>
<label>博客内容</label>
<textarea v-model="blog.content"></textarea>
<div id="checkboxes">
<label>Vue</label>
<input type="checkbox" value="Vue" v-model="blog.categories">
<label>Node</label>
<input type="checkbox" value="Node" v-model="blog.categories">
<label>React</label>
<input type="checkbox" value="React" v-model="blog.categories">
<label>Angular</label>
<input type="checkbox" value="Angular" v-model="blog.categories">
</div>
<label>作者:</label>
<select v-model="blog.author">
<option v-for="author in authors" :key="author">
{{author}}
</option>
</select>
<button v-on:click.prevent="post">添加博客</button>
</form>
<div v-if="submmited">
<h3>您的博客发送成功</h3>
</div>
<div id="preview">
<h3>博客总览</h3>
<p>博客标题:{{blog.title}}</p>
<p>博客内容:</p>
<p>{{blog.content}}</p>
<p>
<ul>
<li v-for="category in blog.categories" :key="category">
{{category}}
</li>
</ul>
</p>
<p>作者:{{blog.author}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'add-blog',
data () {
return {
blog:{
title:"",
content:"",
categories:[],
author:""
},
authors:["Hemiah","Henry","Bucky"],
submmited:false
}
},
methods:{
post:function(){
const query = Bmob.Query('blog');
query.set("title",this.blog.title);
query.set("content",this.blog.content);
query.set("categories",this.blog.categories.join(","));
query.set("author",this.blog.author);
query.save().then(res => {
console.log(res);
this.submmited = true;
}).catch(err => {
console.log(err);
});
}
}
}
</script>
<style scoped>
#add-blog *{
box-sizing: border-box;
}
#add-blog{
margin: 20px auto;
max-width:600px;
padding:20px;
}
label{
display:block;
margin: 20px 0 10px;
}
input[type="text"],textarea,select{
display:block;
width:100%;
padding:8px;
}
#checkboxes label{
display: inline-block;
margin-top: 0;
}
#checkboxes input{
display: inline-block;
margin-right:10px;
}
button{
display:block;
margin:20px 0;
background:crimson;
color:#fff;
border:0 ;
padding:14px;
border-radius:4px;
font-size:18px;
cursor:pointer;
}
#preview{
padding: 10px 20px;
border:1px dotted #ccc;
margin:30px 0;
}
#h3{
margin-top:10px;
}
textarea{
height:200px;
}
</style>
