时间戳

首页 > 解决方案 > 在 Vue 2 中的 axios 请求后更新关注状态

javascript - 在 Vue 2 中的 axios 请求后更新关注状态

问题描述

我在 axios 请求后更新跟随取消关注按钮的所有 wht innet 都收到此错误，它会这样做但我不想有任何错误

[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;
        },
    }

标签： javascriptlaravelvue.js

解决方案

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

https://codesandbox.io/s/xoyq2w996z

推荐阅读