Я делаю в так называемом блоге названия постов, а сами посты принимаются api. Я могу удалять сообщения и изменять их с помощью запросов axios. Я сделал так, чтобы при нажатии на кнопку «изменить пост» открывалась страница с заголовком и самим постом в текстовых полях. Когда я начинаю изменять заголовок и сами сообщения, в консоли появляется такая ошибка: :"Распространение мутации:" заголовок "," ". И когда я нажимаю кнопку, чтобы сменить пользователя, Я должен быть переведен на детальную страницу поста с измененным именем и постом, но когда я делаю это, я получаю подробную страницу, но сломанную.
Мой проект на GitHub
Код страницы со списком сообщений:
<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>
Код страницы, открывающейся при нажатии на сообщение:
<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>
Код страницы, которая открывается при нажатии кнопки изменения:
<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>