在 Vue 2 中的 axios 请求后更新关注状态答案

【问题标题】：update follow status after axios request in Vue 2在 Vue 2 中的 axios 请求后更新关注状态
【发布时间】：2019-10-01 21:14:30
【问题描述】：

在 axios 请求后更新关注取消关注按钮时，我得到了这个错误，但我不想有任何错误

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“正在关注”

  <template>
    <div v-if="isnot">
    <a href="#"  @click.prevent="unfellow" v-if="isfollowing" >unFellow</a>
    <a href="#" @click.prevent="fellow"  v-else >Fellow</a>
    </div>
</template>

    props:['isnot','isfollowing','follower']

我的方法

        fellow () {
            axios.post(`/@${this.follower}/follow/`)
              this.isfollowing = !this.isfollowing;
        },
        unfellow () {
            axios.post(`/@${this.follower}/unfollow/`)
              this.isfollowing = !this.isfollowing;
        },
    }

【问题讨论】：

你不应该更新一个道具。

标签： javascript laravel vue.js

【解决方案1】：

道具不应该直接更新，你需要创建一个局部变量来获取你的初始状态，因此你的突变应该在局部变量上，我写了这个例子希望它有所帮助

https://codesandbox.io/s/xoyq2w996z

【讨论】：