Vue。 Js Laravel 统计 JSON 的元素

Question

我想在 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":"clientmail@mailclient.com",
         "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>

Answer 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>