Vuejs mutating a prop uyarısı ve çözümü

30 Eylül 2019 5 dk okuma süresi 71 okunma
Error message: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Bu şekilde bir hata alıyorsanız eğer muhtemelen component'e parent üzerinden aldığınız datayı gönderiyorsunuz ve component içerisinde bu datayı değiştiriyorsunuz veya yeniden çekip render etmeye çalışıyorsunuz.

Vue dökümanı aslında açık olarak yazmış. Bu method deprecated (artık kullanılmayan) olmuş ve anti-pattern olarak kabul ediliyor. Yeni vue mekanizmasında data değiştiğinden parent'ın da render olması gerekiyor ve gereksiz yere maliyet ortaya çıkıyor. Sadece component'in render olması gerekiyor. Bu nedenle component tarafında gelen prop'u da bir data objesine atıyoruz. Aşağıdaki örnek anlamanıza yardımcı olacaktır.

otable adında bir component'im var ve içerisinde 4 adet props var. Bu component ile dinamik olarak aldığım verileri listeleyebiliyorum ve her kolon üzerinde bulunan input text ile arama işlemini gerçekleştiriyorum. Parent component'ten aldığım veriyi direk component'e gönderiyorum ve arama işlemlerini component üzerinde yapıyorum. Arama işlemi dinamik ve veritabanı üzerinden gerçekleştiği için haliyle gelen verinin değişmesi gerekiyor. İlk seferinde list adındaki prop'u değiştiriyordum. Bu şekilde yapıldığında da çalışıyor fakat developer tools > console üzerinde uyarı veriyor ve bunun best practice (en iyi uygulama kuralları) olmadığını bize söylüyor.. Bu nedenle gelen list prop'unu component'in data objesi üzerinde tutuyoruz ve veriler güncellendiğinde data objesi üzerinden işlem yapıyoruz. Bu şekilde parent zaten etkilenmiyor ve sadece component render olmuş oluyor.

İlgili örneğe Github Vuejs örneği üzerinden ulaşabilirsiniz.

Vue.component("otable", {
 props: {
        title: { type: String },
        list: {
            required: true, default() {
                return '[]'
            }
        },
        headers: { required: true },
        headerFilters: { required: true }
 },
 data: function () {
        return {
            compList: this.list
        };
 },
 methods: {
        doSearch: function (searchValues) {
            var self = this;
            if (searchValues.length > 0) {
                fetch(localUrl + "/api/getusers")
                    .then(res => res.json())
                    .then(function (response) {
                        if (response.model.length > 0) {
                            self.compList = response.model;
                        } else {
                            self.compList = [];
                        }
                    });
            }
        }
 },
 template: `
        <div class="table-responsive">
            <h3 class="table-title" v-if="title.length">{{title}}</h3>
            <table class="table table-bordered table-hover table-records">
                ...
            </table>
        </div>
 `
});


Yazılarıma abone olmak ister misiniz?
Spam yapılmaz, sadece bildirim amaçlıdır. İstediğiniz zaman abonelikten çıkabilirsiniz.
İlginizi çekebilecek diğer yazılar.
Node version manager (nvm) nedir ve nasıl kullanılır?

jQuery ile tüm tarayıcılarda input select option'larını sağlıklı şekilde gizleyip göstermeye yarayan kod parçası.

jquery template nedir ve kullanım örneği