دورة VUE JS للمبتدئين الدرس السادس عشر


فهاد الدرس السادس عشر من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش كل مرة دخلنا شي مصاريف تزاد وتنقص من المبلغ الإجمالي لي عندنا وأيضا يلا زدنا شي مداخيل تزاد فالمبلغ الإجمالي مع تغيير لون الخلفية من أخضر لأحمر في حالة كان المبلغ سلبي.


1- إضافة المصاريف وطرحها من المبلغ الإجمالي

فباش اي مصاريف  دخلتها  نقصها من المبلغ الإجمالي ونغير لون الخلفية من أخضر إلى احمر في حالة كان المبلغ أقل من الصفر غادي نمشي ل fonction depenseAdded ف App.vue وغادي ندير عليها تغيير:
- أول حاجة كنقص المصروف لي دخلت من المبلغ الإجمالي ثم كنتحقق يلا كان المبلغ أقل من الصفر كنرد ل propriété positif ل false باش لون الخلفية يتغير للأحمر.
- في حالة مكان أكبر من صفر كنخلي propriété positif كتساوي true.
فدبا كل مرة دخلت مصروف غادي يتنقص من المبلغ الإجمالي 
الكود لي عدلنا ف App.vue هو :

                                //app.vue

depenseAdded(){
                this.montant -= parseInt(this.data.price);
                if(this.montant < 0){
                    this.positif = false;
                }else{
                    this.positif = true;
                }
                this.data = {};
            },
                            

2- إضافة المداخيل و إضافتها للمبلغ الإجمالي

فباش اي مداخيل  دخلتها نزيدها للمبلغ الإجمالي ونغير لون الخلفية من احمر إلى أخضر غادي نمشي ل fonction gainAdded ف App.vue وغادي ندير عليها تغيير:
- أول حاجة كنزيد المدخول لي دخلت للمبلغ الإجمالي ثم كنتحقق يلا كان المبلغ أكبر من الصفر كنرد ل propriété positif ل true باش لون الخلفية يتغير للأخضر.
- في حالة مكان أصغر من صفر كنخلي propriété positif كتساوي false.
فدبا كل مرة دخلت مداخيل غادي تزاد للمبلغ الإجمالي 
الكود لي عدلنا ف App.vue هو :

                                //app.vue

gainAdded(){
                this.montant += parseInt(this.data.price);
                if(this.montant > 0){
                    this.positif = true;
                }else{
                    this.positif = false;
                }
                this.data = {};
            },
                            

3- التحقق من أن الحقول مملوءة قبل كل إضافة

فقبل من نزيد شي حاجة خص ضروري من التحقق بلي الحقول فيها شي قيمة باش منزيدش الفراغ فغادي نمشي ل App.vue وفل fonction addDepense و addGains قبل ما نرسل ل bus لي فيه ل événement لي غادي يمكن من إضافة العملية :

غادي نتحقق بلي القيمة ديال الحقل libelle و price ماشي فارغة عاد غادي نرسل ل bus.

الكود لي عدلنا ف App.vue هو :

                                //App.vue

 addDepense(){
                if (this.data.libelle.length && this.data.price.length) {
                    this.bus.$emit('addDepense');
                }
            },
 addGains(){
      if (this.data.libelle.length && this.data.price.length) {
               this.bus.$emit('addGains');
       }
   },