Cara Menampilkan Value Pada Form Edit di Vue.js

Tentu kita akan menampilkan data pada form dengan value saat ini ketika melakukan editing untuk diperbaharui. Data yang kita ambil dari API ini dapat kita tampilkan dengan dua cara yang akan dicontohkan disini.

Contoh disini dilakukan pada aplikasi laravel - vue dan konsumsi API menggunakan Axios.

Untuk cara pertama, kita bisa lakukan dengan meneruskan respon dari endpoint ke data properti yang kita miliki. Contohnya adalah seperti dibawah ini:

<script>
export default { 
  data() {
    return {
      form: {
        title: '',
        body: '',  
      },  
    }
  },
  mounted(){
    this.fetchData();
  },
  methods: {
    async fetchData(){  
      await this.$axios.$get('/api/post/'+ this.$route.params.id)
        .then(res => {
          let post = res.data.post
          this.form =  {
            title: post.title,
            body: post.body
          }     
        })
        .catch(error => console.log(error))
      }
    }
}
</script>

<template>
  <div class="form">
    <form @submit.prevent="submit">
      <div class="form__group">
        <label class="title" id="title" for="title">Title</label>
        <div>
          <input id="title" name="title" v-model="form.title" type="text" placeholder="Title..."> 
        </div>
      </div>
      <div class="form__group">
        <label class="body" id="body" for="body">Body</label>
        <div>
          <textarea id="body" name="body" v-model="form.body" placeholder="body..."></textarea>
        </div>
      </div>
      <button class="btn btn--green" type="submit">Submit</button>  
    </form>
  </div>
</template>

Untuk endpoint dan data properti silahkan disesuaikan. Selanjutnya untuk cara yang kedua, kita bisa gunakan metode watch.

<script>
export default { 
  data() {
    return {
      form: {
        title: '',
        body: '',  
      },  
      post: ''
    }
  },
  watch: { 
    post: {
      handler(val, oldVal) {  
        this.form =  {
          title: val.title,
          body: val.body 
        }  
      },
      immediate: true,
    } 
  },
  mounted(){
    this.fetchData();
  },
  methods: {
    async fetchData(){  
      await this.$axios.$get('/api/post/'+ this.$route.params.id)
        .then(res => {
          this.post = res.data.post  
        })
        .catch(error => console.log(error))
      }
    }
}
</script>

Fitur watcher ini dapat melihat atau melakukan pengamatan terhadap data yang dimiliki dari permintaan API atau terhadap perubahan yang dilakukan.

Kita juga dapat menambahkan kondisinonal dan melakukan pengamatan terhadap data properti jika terjadi perubahan. Seperti contoh berikut:

mounted() {
  this.watchData();
},
methods: {
  watchData() {
    var unwatch = this.$watch(
      'form',
      function (val, oldVal) {
        if (!val.title || !val.body) {
          alert('Form input tidak boleh kosong!')
        }
        console.log(val.title);
      }, {
        deep: true
      }
    )
  },
}

Jika menggunakan props:

export default { 
  props: ['post'],
  data() {
    return {
      form: {
        title: '',
        body: '',  
      },   
    }
  },
  watch: { 
    post: {
      handler(val, oldVal) {  
        this.form =  {
            title: val.title,
            body: val.body
          }  
        },
      immediate: true,
    }
  },
}

Demikian cara menampilkan value pada form input yang bisa kita gunakan. Silahkan dicoba, dikembangkan, dan lakukan eksperimen.

Postingan terkait Vue.js: Cara Membuat Dynamic Page Title di Vue.js - Laravel