私は私のプロジェクトの次のセットアップ持ってVueのプロップ（Vue2 + Laravel）

Question

を変異さ：

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にあまり精通していないので、反パターンなどに従っているかどうかはわかりません。

Answer 1

親子関係では、データは親から子にしか流れません。したがって、親データを子から直接変更することはできません。あなたは、あなたが親が聞くことができる特定のイベントを放つだけでなければなりません。

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

をそしてSchool.vueスクリプトを編集します：

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

が親に特定のメソッドを追加：コンポーネント学校を使用して

親コンテキストで

---

は、追加のディレクティブでそれを使用

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