Vue.js 避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖

我做的就是所谓的博客，帖子的名字和帖子本身都是用api写的。我可以使用axios查询删除和更改帖子。我这样做是为了，当我点击“更改帖子”按钮时，一个页面会打开，在文本字段中显示标题和帖子本身。当我开始更改标题和帖子本身时，例如“传播正在发生变化：“title”，”。当我点击按钮更改用户时，我应该被转移到带有更改名称和帖子的帖子的详细页面，但当我这样做时，我会得到一个详细信息

包含帖子列表的页面代码：

<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>

{{post.title}
{{post.body}}



从“vuex”导入{mapState}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
当前：空，
页码：0，
visiblePostID:“”，
}
},
安装的（）{
此.$store.dispatch（'loadPosts'））
},
计算：{
…地图状态([
“职位”
]),
职位：职能（职位）{
返回Math.ceil（this.posts.length/6）；
},
paginatedData（）{
const start=this.page*6；
const end=start+6；
返回这个.filteredPosts.slice（开始，结束）；
},
filteredPosts（）{
返回此.posts.filter（（post）=>{
返回post.title.match（this.search）；
});
},
}
}

按下post时打开的页面代码：

<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>

{{id}
{{title}}
{{body}}

删去
改变
投递

从“axios”导入axios；
导出默认值{
道具：{
身份证号码：，
标题：字符串，
正文：字符串，
},
数据：函数（）{
返回{
当前：空，
员额：[]，
createTitle:“”，
createBody:“”，
visiblePostID:“”，
}
},
已创建：函数（）{
var postId=此$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]
},
方法：{
deleteData（{commit}，id）{
axios.delete（'http://jsonplaceholder.typicode.com/posts/“+id）。然后（响应=>{
console.log（'delete'）
此柱拼接（id-1，1）；
})
.catch（函数（错误）{
console.log（错误）
})
}
}
}

按下按钮时打开的页面代码更改：

<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>

编辑您的标题：


编辑您的帖子


申请
从“axios”导入axios；
导出默认值{
道具：{
身份证号码：，
标题：字符串，
正文：字符串，
},
方法：{
变更公告（id、标题、正文）{
轴心http://jsonplaceholder.typicode.com/posts/“+id{
标题:标题,，
身体：身体
})
},
}
}

出现Vue给您的警告是因为Vue不希望您改变给孩子的道具

在单击“更改帖子”按钮时显示的页面上，您正在文本区域标记中使用v-model。您正在将v-model绑定到您提供给页面的道具。这就是错误的来源。 千万不要将v型模型绑定到道具上

---

您可以在Vue的文档中了解更多信息：