[Vuejs]-Mutating a Vue prop (Vue2 + Laravel)

by

0👍

In parent-child relation the data flows only from parent to child through props. So, you can’t directly change parent data from child. You must just emit particular event for which you let the parent listen.

In parent context where you using component School, use it with additional directive:

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

Add particular method to parent:

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

And edit School.vue script:

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

Leave a comment