طريقة عمل احصائيات بـ vue JS

أفترض أنك تمتلك مكون فرعي يتم به عرض مجموعة من الأعمال ولنقل انه يتم تخزينها في مصفوفة كائنات projects. وتريد بشكل ما حساب عدد هاته الأعمال وحقنها الى المكون العام الذي يعبر عن الصفحة الرئيسية.

يمكنك كفكرة التقاطها كعائد عن تابع للمكون معرفا كمرجع كـ:

<template>
  <div id="app">
     <h2> {{ projectsCount }} </h2>
     <ProjectsComponent ref="ProjectsComponent" />
  </div>
</template>

<script>
import ProjectsComponent from './ProjectsComponent'
export default {
  data:{
    projectsCount: 0,
  }
  components: {
   ProjectsComponent
  },
  mounted () {
    
    this.projectsCount = this.$refs.ProjectsComponent.getProjectsCount();
  }
}
</script>

 قم في داخل المكون الفرعي نعرف التابع getProjectsCount الذي يعيد عدد المشاريع:

<template>
  <div id="projects">
     projects 
  </div>
</template>

<script>
export default {
  data(){
      return {
          projects:[
            {id: 1, name: 'Web development'},
            {id: 1, name: 'Web design'}
          ]
      }
  },
  
  methods:{
      getProjectsCount(){
          return this.projects.length
      }
  }
}
</script>

لم تنجح معي

هل يوجد طريقه اخرى ؟

بتاريخ منذ ساعة مضت قال علي العبدالله:

لم تنجح معي

هل يوجد طريقه اخرى ؟

هل تظهر اي رسالة خطأ ؟ 

ERROR in ./src/views/HomeView.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/HomeView.vue?vue&type=script&lang=js&) 1:0-42
Module not found: Error: Can't resolve '@/portfolio.vue' in 'C:\Users\Administrator\Desktop\dev\مشاريعي\personal-website-vue\src\views'   
 @ ./src/views/HomeView.vue?vue&type=script&lang=js& 1:0-202 1:218-221 1:223-422 1:223-422
 @ ./src/views/HomeView.vue 2:0-60 3:0-55 3:0-55 10:2-8
 @ ./src/router/index.js 3:0-44 11:13-21
 @ ./src/main.js 4:0-30 8:2-8
 

بتاريخ 19 ساعة قال علي العبدالله:

ERROR in ./src/views/HomeView.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/HomeView.vue?vue&type=script&lang=js&) 1:0-42
Module not found: Error: Can't resolve '@/portfolio.vue' in 'C:\Users\Administrator\Desktop\dev\مشاريعي\personal-website-vue\src\views'   
 @ ./src/views/HomeView.vue?vue&type=script&lang=js& 1:0-202 1:218-221 1:223-422 1:223-422
 @ ./src/views/HomeView.vue 2:0-60 3:0-55 3:0-55 10:2-8
 @ ./src/router/index.js 3:0-44 11:13-21
 @ ./src/main.js 4:0-30 8:2-8
 

يبدوا أن هنالك مشكلة بتضمين مكون portfolio.vue من الأساس.

انتبه الى تضمينه على نحو صحيح.