84 lines
2.0 KiB
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>
|