变异 Vue 道具（Vue2 + Laravel）[重复]答案

【问题标题】：Mutating a Vue prop (Vue2 + Laravel) [duplicate]变异 Vue 道具（Vue2 + Laravel）[重复]
【发布时间】：2018-05-01 16:25:01
【问题描述】：

我的项目有以下设置：

window.school = {
    "id": 1,
    "users": [
        {
            "id": 0,
            "name": "Adam Carter",
            "work": "Unilogic",
            "email": "adam.carter@unilogic.com",
            "dob": "1978",
            "address": "83 Warner Street",
            "city": "Boston",
            "optedin": true
        },
        {
            "id": 1,
            "name": "Leanne Brier",
            "work": "Connic",
            "email": "leanne.brier@connic.org",
            "dob": "13/05/1987",
            "address": "9 Coleman Avenue",
            "city": "Toronto",
            "optedin": false
        }
    ],
    "images": [
        "img0.png",
        "img1.png",
        "img2.png"
    ],
    "coordinates": {
        "x": 35.12,
        "y": -21.49
    },
    "price": "$59,395"
}
const app = new Vue({
    router,
    el: '#app',
    data: {
        school: school,
    }
});

我的 vue 组件之一是 School.vue

<template>
    <div>
        <input type="button" value="Update school data" v-on:click="update()">
    </div>
</template>

<script>
    export default {
        props:[
            'school',
        ],
        methods: {
            update: function() {
                let url = `/api/v1/school/${this.school.id}/update`;
                this.axios.get(url, this.decisions)
                  .then((res) => {
                      // WARNING IS THROWN IN HERE
                      this.school = res.data.school;
                  })
                  .catch((error) => {
                      console.log(error);
                  });
            }
        },
    }
</script>

但我收到以下警告：warning: Avoid mutating a prop directly

所以问题是，如何从 Vue 组件更新应用程序“学校”信息？我对 Vue 不是很熟悉，不知道是不是遵循反模式还是其他什么，非常感谢您的帮助。

【问题讨论】：

标签： php laravel vue.js vuejs2 vue-component

【解决方案1】：

在父子关系中，数据仅通过道具从父子流向子源。因此，您不能直接从子级更改父级数据。您必须只发出让父级监听的特定事件。

在使用组件 School 的父上下文中，将其与附加指令一起使用：

<div id="app">
  <school v-on:update="updateSchool"></school>
</div>

向父级添加特定方法：

const app = new Vue({
  router,
  el: '#app',
  data: {
    school: school,
  },
  methods: {
    updateSchool (data) {
      this.school = data
    }
  }
})

并编辑 School.vue 脚本：

<script>
  export default {
    props:[
      'school',
    ],
    methods: {
      update: function() {
        let url = `/api/v1/school/${this.school.id}/update`;
        this.axios.get(url, this.decisions)
          .then((res) => {
            this.$emit('update', res.data.school);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  }
</script>

【讨论】：