Vue.JS Refs ile Inputlara Erişim

Vue.js'te ref özelliği, HTML elementlerine veya Vue bileşenlerine doğrudan erişim sağlamak için kullanılır. Bu özellik, genellikle DOM manipülasyonları veya bazı özel durumların yönetimi için kullanılır. Input alanlarına erişmek ve değerlerini almak veya değiştirmek için ref özelliği kullanılabilir. İşte bir örnek:

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="logInputValue">Değeri Logla</button>
  </div>
</template>

<script>

export default {
  methods: {
    logInputValue(
) {
      // Ref ile input alanına erişim
      const inputValue = this.$refs.myInput.value;
      console.log('Input Değeri:', inputValue);
    }
  }
}

</script>

Yukarıdaki örnekte, bir input alanına ref özelliğiyle myInput adında bir referans verilmiştir. Ardından, bu referansı kullanarak logInputValue adında bir method tanımlanmıştır. Bu method, butona tıklandığında çağrılır ve input alanının değerini alır ve konsola yazdırır.

$refs özelliği, Vue bileşenlerinde tanımlanan ref'lere erişim sağlar. Bu yöntem, genellikle Vue.js içinde DOM manipülasyonları veya belirli elementlere erişim gerektiren durumlarda kullanılır. Ancak, ref'lerin gereksiz kullanımından kaçınılmalı ve mümkün olduğunca Vue'nun reaktif yapısını kullanmak tercih edilmelidir.