Membaca Data Vue Instance (Root) dari Komponen

Karena dasarnya publikasi ini membahas Laravel secara khusus, mari kita anggap kita menggunakan Vue pada aplikasi yang berbasis framework Laravel.

Sebagai contoh, dalam berkas resources/assets/js/app.js terdapat Vue instance dan beberapa definisi data di dalamnya.

const app = new Vue({
  el: '#app',
  data: {
    name: 'Laravel',
    version: '0.1-alpha'
  }
});

Kemudian, kita mempunyai sebuah komponen yang ingin membaca data pada Vue instance di atas. Dari dalam skrip komponen, kita bisa menggunakan objek this.$root untuk membaca semua properti pada instance Vue (root) aplikasi.

Sebagai contoh, implementasinya untuk mengganti data name dan version pada root.

export default {
  mounted() {
    this.$root.$data = {
      name: 'Some Component',
      version: '1.0'
    }
  }
}

Jangan lupa untuk menggunakan spesial properti $data (bukan data) pada skrip.

Untuk melihat semua nilai dalam properti tersebut, kita bisa menggunakan logger dari JavaScript.

console.log(this.$root);