Question

我做的博客名称是帖子，帖子本身是由api取的。我可以删除帖子并使用axios查询对其进行更改。我这样做的目的是，当我单击“更改帖子”按钮时，将打开一个页面，其中标题和帖子本身在文本字段中。当我开始更改标题和帖子本身时，例如a mistake appears in the console:“正在更改传播：“标题”，“”。并且当我单击按钮以更改用户时，我应该转到详细页面的名称和帖子已更改，但是当我这样做时，我会得到详细的page but broken.

My project on 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>

Answer 1

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

在单击“更改发布”按钮时显示的页面上，您正在textarea标记中使用v-model。您正在将v模型绑定到提供给页面的道具。这是错误的来源。 您永远不应将v模型绑定到道具。

您可以在Vue的文档中了解有关此内容的更多信息

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

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖

1 个答案: