دورة vue js للمبتدئين الدرس الثالت عشر
فهاد الدرس الثالت عشر من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا كيفاش نربطو القيم لي غادي ندخلو فالحقول مع ل objet data منبعد غادي نشوفوا كيفاش نزيدو المبالغ لي دخلنا فل arrays لي زدنا قبل سواء gains أو depenses.
1- ربط قيم الحقول مع data objet
//App.vue
<template>
<div>
<div class="container">
<h1 class="text-danger text-center">{{name}}</h1>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card mt-3">
<div class="card-body bg-light">
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
</div>
<div class="form-group">
<input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
</div>
<div class="form-group">
<button class="btn btn-success btn-sm mr-2"><i class="fa fa-plus"></i></button>
</div>
<div class="form-group">
<button class="btn btn-danger btn-sm"><i class="fas fa-minus-square"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<Gains></Gains>
</div>
<div class="col-md-6">
<Depenses></Depenses>
</div>
</div>
</div>
</div>
</template>
<script>
import Gains from './components/Gains';
import Depenses from './components/Depenses';
import Vue from 'vue';
export default{
name : 'App',
data(){
return{
data : {libelle:'',price:''},
name : 'Gestion de dépenses'
}
},
components : {
Gains,
Depenses
},
}
</script>
<style scoped>
</style>
2- إضافة les fonctions ف Depenses.vue
//Depenses.vue
<template>
<div>
<h3 class="text-info">Dépenses</h3>
<hr>
<ul class="list-group">
<li class="list-group-item" v-for="(dep,index) in depenses" v-bind:key="index">
{{dep.libelle}} {{dep.price}}
<span><i class="fa fa-times" @click="clicked(index)"></i></span>
</li>
</ul>
</div>
</template>
<script>
export default{
name : 'Depenses',
data(){
return {
depenses : []
}
},
methods:{
addDepense(){
this.depenses.push(this.data);
}
},
}
</script>
<style scoped>
i:hover{
cursor: pointer;
}
</style>
3- إضافة les fonctions ف Gains.vue
//Gains.vue
<template>
<div>
<h3 class="text-info">Gains</h3>
<hr>
<ul class="list-group">
<li class="list-group-item" v-for="gain in gains" v-bind:key="gain.index">
{{gain.libelle}} {{gain.price}}
<span><i class="fa fa-times"></i></span>
</li>
</ul>
</div>
</template>
<script>
export default{
name : 'Gains',
data(){
return {
gains : []
}
},
methods : {
addGains(){
this.gains.push(this.data);
}
},
}
</script>
<style scoped>
i:hover{
cursor: pointer;
}
</style>
4- إرسال ل objet data من App.vue ل components
//App.vue
<template>
<div>
<div class="container">
<h1 class="text-danger text-center">{{name}}</h1>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card mt-3">
<div class="card-body bg-light">
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
</div>
<div class="form-group">
<input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
</div>
<div class="form-group">
<button class="btn btn-success btn-sm mr-2" @click="addGains"><i class="fa fa-plus"></i></button>
</div>
<div class="form-group">
<button class="btn btn-danger btn-sm" @click="addDepense"><i class="fas fa-minus-square"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<Gains v-bind:bus="bus" v-bind:data="data"></Gains>
</div>
<div class="col-md-6">
<Depenses v-bind:bus="bus" v-bind:data="data"></Depenses>
</div>
</div>
</div>
</div>
</template>
<script>
import Gains from './components/Gains';
import Depenses from './components/Depenses';
import Vue from 'vue';
export default{
name : 'App',
data(){
return{
bus : new Vue(),
data : {libelle:'',price:''},
name : 'Gestion de dépenses'
}
},
components : {
Gains,
Depenses
},
methods: {
addDepense(){
this.bus.$emit('addDepense');
},
addGains(){
this.bus.$emit('addGains');
},
}
}
</script>
<style scoped>
</style>
5- استقبال data objet ول bus
//Depenses.vue
<template>
<div>
<h3 class="text-info">Dépenses</h3>
<hr>
<ul class="list-group">
<li class="list-group-item" v-for="(dep,index) in depenses" v-bind:key="index">
{{dep.libelle}} {{dep.price}}
<span><i class="fa fa-times" @click="clicked(index)"></i></span>
</li>
</ul>
</div>
</template>
<script>
export default{
props : ['bus','data'],
name : 'Depenses',
data(){
return {
depenses : []
}
},
methods:{
addDepense(){
this.depenses.push(this.data);
}
},
mounted() {
this.bus.$on('addDepense', this.addDepense);
},
}
</script>
<style scoped>
i:hover{
cursor: pointer;
}
</style>