Vue。 Js Laravel 统计 JSON 的元素

Posted 2023-03-14

【中文标题】Vue。 Js Laravel 统计 JSON 的元素

【英文标题】：Vue. Js Laravel count elements of JSON

【发布时间】：2019-09-02 06:23:37

【问题描述】：

我想在 JSON 中显示任务元素的数量，但我不知道该怎么做。

我想做这样的事情：

2/12 要做的任务（其中 2 - 带有标志 1 的任务，12 - 所有任务）

我尝试使用长度函数，但我得到信息函数长度未定义，与切片函数类似。

[  
     
      "id":1,
      "clients_id":1,
      "products_id":1,
      "tasks_id":1,
      "project_name":"Some project",
      "created_at":null,
      "updated_at":null,
      "clients":  
         "id":1,
         "client_name":"Some client",
         "contact_name":"Some client",
         "client_phone":"123123123",
         "client_mail":"[e-mail]",
         "client_nip":"1112223333",
         "client_logo":"logo.jpg",
         "updated_at":"2019-04-11 09:45:11",
         "created_at":"-0001-11-30 00:00:00"
      ,
      "products":  
         "id":1,
         "product_name":"Some product",
         "product_description":"Really nice product bro",
         "product_price":"999$",
         "updated_at":"2019-04-08 14:35:13",
         "created_at":null
      ,
      "tasks":[  
           
            "id":1,
            "project_id":1,
            "task_name":"First task",
            "task_description":"its very hard task",
            "task_due":"2099-01-12 00:00:00",
            "status":0,
            "created_at":null,
            "updated_at":"2019-04-11 14:09:08"
         ,
           
            "id":2,
            "project_id":1,
            "task_name":"fix task 1",
            "task_description":"or something else",
            "task_due":"2201-01-12 00:00:00",
            "status":1,
            "created_at":null,
            "updated_at":"2019-04-11 14:10:11"
         
      ]
   ]

<script>
    export default 
        mounted() 
            let app = this;
            let id = app.$route.params.id;
            app.id = id;
            axios.get('/api/v1/projects/' + id)
                .then(function (resp) 
                    app.project = resp.data;
                )
                .catch(function () 
                    alert("Could not load your projects")
                );
        ,
        data: function () 
            return 

               //client_id: null,
                project: 
                    id: '',
                    clients_id: '',
                    products_id: '',
                    tasks_id: '',
                    project_name: '',
                    updated_at: '',
                    created_at: '',
                    clients: ''

                ,
                task: 
                status: ''
                

               //client: []
            
        ,
        methods: 
            saveForm() 
                var app = this;
                var newproject = app.project;
                axios.patch('/api/v1/projects/' + app.id, newproject)
                    .then(function (resp) 
                        app.$router.replace('/c/');
                    )
                    .catch(function (resp) 
                        console.log(resp);
                        alert("Could not create your company");
                    );
            ,
            taskDone(taskid, projectid)
                  var app = this;
                  app;
                var newtask = app.task;
                var flag = 1; 
                axios.patch('/api/v1/tasks/' + taskid + '?status='+flag)
                    .then(function (resp) 
                        app.$router.push('/pr/view/' + projectid);
                        location.reload();
                    )
                    .catch(function (resp) 
                        console.log(resp);
                        alert("Could not create your company");

                    );
            ,
            taskUnDone(taskid, projectid)
                  var app = this;
                  app;
                var newtask = app.task;
                var flag = 0; 
                axios.patch('/api/v1/tasks/' + taskid + '?status='+flag)
                    .then(function (resp) 
                        app.$router.push('/pr/view/' + projectid);
                        location.reload();
                    )
                    .catch(function (resp) 
                        console.log(resp);
                        alert("Could not create your company");

                    );
            
        
    
</script>

【参考方案1】：

您可以创建一个计算函数，返回按状态 1 过滤的任务长度。

computed() 
    status() 
        const tasks = this.project.tasks; 
        const complete = tasks.filter(task => task.status === 1);
        return `$complete.length/$tasks.length`;
    

然后在您的标记中使用status 作为“变量”。

<p>Tasks done:  status </p>

【讨论】：

这是我在床上用手机写的，哈哈，明天再拉个皮条吧??

谢谢，我明天检查:)

好的，我检查了你的代码。我修改了一些东西，但是谢谢！ computed: status() const tasks = this.project.tasks; const complete = tasks.filter(task => task.status === 1); return complete.length;