72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<template>
|
|
<form>
|
|
<div class='form-group'>
|
|
<label for='author'>Author</label>
|
|
<input v-model='author' type='text' name='author' id='author' placeholder="John Doe" class='form-control form-control-lg'>
|
|
</div>
|
|
<div class='form-group'>
|
|
<label for='date-published'>Publication date</label>
|
|
<input v-model='date_created' type='date' name='date-published' id='date-published' class='form-control form-control-sm'>
|
|
<input type='button' class='btn btn-default today-button' @click.prevent="setToday(1)" value='today'><br>
|
|
</div>
|
|
|
|
<div class='form-group'>
|
|
<label for='date-modified'>Modification date</label>
|
|
<input v-model='date_modified' type='date' name='date-modified' id='date-modified' class='form-control form-control-sm'>
|
|
<input type='button' class='btn btn-default today-button' @click.prevent="setToday(2)" value='today'><br>
|
|
</div>
|
|
<div class='form-group'>
|
|
<label for='meta-title'>meta title</label>
|
|
<input v-model='title' type='text' name='meta-title' id='meta-title' placeholder="What's up ?" class='form-control form-control-lg'>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'metaForm',
|
|
props: {
|
|
},
|
|
computed: {
|
|
author (){
|
|
return this.$store.state.article.meta.author
|
|
},
|
|
date_modified (){
|
|
return this.$store.state.article.meta.date_modified
|
|
},
|
|
date_created (){
|
|
return this.$store.state.article.meta.date_created
|
|
},
|
|
title (){
|
|
return this.$store.state.article.meta.title
|
|
},
|
|
},
|
|
methods : {
|
|
setToday : function(date) {
|
|
console.log(this.$store.state.article.meta)
|
|
this.$store.commit('today', date)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
form {
|
|
display: block;
|
|
margin-bottom: 50px;
|
|
width: 50%;
|
|
}
|
|
|
|
form > div > input {
|
|
max-width: 50%;
|
|
}
|
|
|
|
.today-button {
|
|
border: solid;
|
|
border-width: 1px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|