Vuejs $refs Kullanımı

Vuejs $refs Kullanımı

Vuejs $refs Nedir ?

Vuejs kullanırken ref kullanmak durumunda kalabiliriz. Ref’ler , dom elemanına Javascript’deki selectorlar gibi (getElementById,getByClassName) erişmemizi sağlayan yapılardır.

$refs Örnek Kullanım

Aşağıdaki örnekte input elementine ref vererek butona tıklanınca inputa ait özellikleri alıp (value,clientWidth,offsetWidth …vb) console yazdırıyoruz.

<template>
<div id="app">
<input ref='myinput' />
<button @click="onClickBtn()">My Button </button>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
 onClickBtn(){
  console.log(this.$refs.myinput.clientWidth);
  console.log(this.$refs.myinput.value.toUpperCase());
  }
 }
}
</script>

Herkese İyi Çalışmalar Dilerim.