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.

My project on GitHub

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>

1 Answers

1
Paul On

The warning Vue gives you appears because Vue does not want you to mutate the props given to a child.

On the page that shows when you click the "change post" button, you are using v-model in your textarea tags. You are binding your v-model to the props that you give to the page. This is where the error comes from. You should never bind v-model to a prop.


You can read more about it in Vue's Documentation:

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow