I do the so-called blog the name of the posts and the posts themselves are taken by api. I can delete posts and change them using axios queries. I made it so that when I click on the "change post" button, a page opens with the title and the post itself in the text fields. When I start to change the title and the posts themselves, such a mistake appears in the console: "Propagation being mutated: "title", "" . and when I click on the button to change the user, I should be transferred to the detailed page of the post with the changed name and post, but when I do this I get a detailed page but broken.
Code of page with list of posts:
<template>
<div class = "app">
<ul>
<li v-for="(post, index) in paginatedData" class="post" :key="index">
<router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
<img src="src/assets/nature.jpg">
<p class="boldText"> {{ post.title }}</p>
</router-link>
<p> {{ post.body }}</p>
</li>
</ul>
<div class="allpagination">
<button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
<div class="pagin">
<button class="item"
v-for="n in evenPosts"
:key="n.id"
v-bind:class="{'selected': current === n.id}"
@click="page=n-1">{{ n }} </button>
</div>
<button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'app',
data () {
return {
current: null,
page: 0,
visiblePostID: '',
}
},
mounted(){
this.$store.dispatch('loadPosts')
},
computed: {
...mapState([
'posts'
]),
evenPosts: function(posts){
return Math.ceil(this.posts.length/6);
},
paginatedData() {
const start = this.page * 6;
const end = start + 6;
return this.filteredPosts.slice(start, end);
},
filteredPosts() {
return this.posts.filter((post) => {
return post.title.match(this.search);
});
},
}
}
</script>
Code of page which open when I press on post:
<template>
<div class="post">
<img src="/src/assets/nature.jpg" class="post_img_nature" >
<h2>{{ id }}</h2>
<h2>{{ title }}</h2>
<p>{{ body }}</p>
<router-link :to="{ name: 'pagination' }"><button @click="deleteData(id)" class="buttonDelete">Delete</button></router-link>
<router-link :to="{ name: 'detailChange', params: {id: id, title: title, body: body} }"><button @click="visiblePostID = id" class="buttonChange">Change</button></router-link>
<router-link :to="{ name: 'pagination' }">
<p>Go to Posts</p>
</router-link>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
id: Number,
title: String,
body: String,
},
data: function() {
return {
current: null,
posts: [],
createTitle: '',
createBody: '',
visiblePostID: '',
}
},
created: function() {
var postId = this.$route.params.id
this.post = this.posts[this.$route.params.id]
this.post = this.posts[this.$route.params.title]
this.post = this.posts[this.$route.params.body]
},
methods: {
deleteData ({commit}, id){
axios.delete('http://jsonplaceholder.typicode.com/posts/' + id).then(response => {
console.log('delete')
this.posts.splice(id-1, 1);
})
.catch(function(error) {
console.log(error)
})
}
}
}
</script>
Code of page which open when I press button change:
<template>
<div class="post">
<div class="tableChange">
<div>
<p class="editText">Edit your title:</p>
<p><textarea v-model="title" class="changeTitle"></textarea></p>
<p class="editText">Edit your post</p>
<p><textarea v-model="body" class="changeBody"></textarea></p>
</div>
<router-link :to="{ name:'detail', params: { title: title, body: body} }"><button type="button" @click="changePost(id, title, body)" class="apply">To apply</button></router-link>
</div>
<img src="/src/assets/nature.jpg" >
</div>
</template>
<script>
import axios from 'axios';
export default {
props: {
id: Number,
title: String,
body: String,
},
methods: {
changePost(id, title, body) {
axios.put('http://jsonplaceholder.typicode.com/posts/' + id, {
title: title,
body: body
})
},
}
}
</script>
