md-parser/md-parser/src/components/EditPage.vue

84 lines
2.0 KiB
Vue

<template>
<div>
<div class="card" v-for="article in articles" :key='article.id'>
<img class='card-img-top' src='../assets/question.png'>
<div class='card-body'>
<h5 class='card-title'>{{ article.title }}</h5>
<p class='card-text'> by {{ article.author }}</p>
<a class='btn btn-primary' href="#" @click.prevent="loadContent(article.id)"> Edit </a>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from '../../node_modules/vue-resource'
Vue.use(VueResource)
export default {
name: 'EditPage',
props: {
},
data: function(){
return {
articles: [],
}
},
http: {
root: 'http://localhost:3000',
},
mounted (){
this.$resource('articles')
.get()
.then(
response => {
this.articles = response.data
},
response => {
console.log('Error: ', response)
}
)
},
methods: {
loadContent: function(key){
this.$resource('articles')
.get({
"id": key
})
.then(
response => {
let data = response.data[0]
// update article meta
this.$store.commit('updateMeta', {
"author" : data.author,
"title": data.title,
"date_created": data.date_created,
"date_modified": data.date_modified,
})
// Call the Vuex action to update the content,
// and await the mutation to be over before going to the Input page.
this.$store.dispatch('updateText', data.content)
.then(() => {
this.$router.push('/write')
})
},
response => {
console.log('Error: ', response)
}
)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.card {
width: 15rem;
display: inline-block;
margin: 10px;
}
</style>