Cara Membuat Pengecekan Kata Menggunakan VueJS -

Hallo sahabat semua jumpa lagi di Website Dumetschool. Pada kesempatan ini saya akan memberikan tutorial mengenai Cara Membuat Pengecekan Kata Menggunakan VueJS. Jadi dalam kasus yang sekarang dibahas yaitu melakukan input ulang kata yang hurufnya sudah diacak-acak atau mode random. Kemudian selanjutnya ada sebuah inputan untuk mengetik ulang kata yang benar.

Bagaimana kalau langsung saja kita membuatnya seperti code yang berikut ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara melakukan pengecekan kata Dengan VueJs</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
</head>
<body>

Lalu selanjutnya untuk bagian body ketikkan seperti dibawah ini:

<div class="container mt-5">
		<div class="row">
			<div class="col-md-8 offset-2 mt-3">
				<div id="Myart">
				  Jawaban Benar : {{ JwbBenar }}
				  <div v-for="item in list" class="text-lowercase py-1">
				  	{{ item.shuffle }} <input type="text" v-model="item.guess" class="form-control" >
				  </div>
				  <button type="button" class="btn btn-info mt-2" @click="correctAnswer">Cek</button>
				</div>
			</div>
		</div>
	</div>

Tentu step selanjutnya yaitu syntax dari Javascript berikut scriptnya:

<script>
  Vue.prototype.$shuffle = function(propertyName) {
  var a = propertyName.split(""),
      n = a.length;
  
  for(var i = n - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = a[i];
    a[i] = a[j];
    a[j] = tmp;
  }
  return a.join("");
}
new Vue({
  data(){
    return{
      list:[],
      JwbBenar: 0
    }
  },
  mounted(){
    var vm = this
    vm.list = [
      {correct: 'book', shuffle: vm.$shuffle('book') ,guess: ''},
      {correct: 'look', shuffle: vm.$shuffle('look') ,guess: ''},
      {correct: 'food', shuffle: vm.$shuffle('food') ,guess: ''}
      ]
  },
  methods:{
    correctAnswer(){
      var vm = this
      vm.JwbBenar =  _.filter(vm.list, function(item){
        return item.correct === item.guess
      }).length
    }
  }
}).$mount('#Myart')
	</script>

pada script diatas ada fungsi untuk acak-acak kata agar urutan huruf tidak berarturan, kemudian pada methods: ada fungsi pengecekan jawaban yang diketikkan pada inputan yaitu correctAnswer().

Baiklah simpan syntax yang sudah diketikkan tadi lalu buka pada browser masing-masing. Maka akan seperti tampilan berikut:

Jadi pada gambar sebelah kanan adalah inputan yang benar sesuai dengan value vm.list {corret:’value’ shuffle:vm.$shuffle(‘pengacakan value’), guest: ‘value yg diinput’}

Saya kira cukup dalam pembahasan artikel ini, semoga bermanfaat serta dapat menambah referensi materi belajar sahabat dan samapi jumpa dilain kesempatan.

terima kasih

Cara Membuat Pengecekan Kata Menggunakan VueJS

Kategori