Vue.js ile input değerini dinamik olarak alma

Merhaba,bu yazıda vue.js ile input içerisine yazılan herhangi bir değeri dinamik olarak nasıl alacağız onu inceleyeceğiz.

Vue.js script’ini ekliyoruz.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Html alanımıza öncelikle bir root parent container daha sonra da kullanmak istediğimiz diğer elementleri tanımlıyoruz.

<div id="root">
    <p>{{description}}</p>
    <input type="text" v-on:input="change">
</div>

İnput içerisine yazılan her karakteri alabilmemiz ,gerçekleşen her event’i yakalamamız ve bir fonksiyonu (change) tetiklememiz gerekiyor.

var root=new Vue({
    el:"#root",
    data:{
        description:'',
    },
    methods:{
        change:function(e){
            this.description=e.target.value
        }
    },
})

data içerisindeki description (ya da herhangi bir veri) alanına erişebilmek için ‘this’ anahtar kelimesini kullanıyoruz ve fonsiyona gönderilen her değeri artık description alanına atayabilmiş oluyoruz.