Question

由于某些原因，我无法访问类别对象未定义的名称

 datas:  [{
              "id": 3,
               "title": "public",
               "created_at": "2019-01-12 02:37:28",
               "updated_at": "2019-01-12 02:37:28",
               "announcements": [{
                            "id": 3,
                            "user_id": 37,
                            "title": "Jumapili 13-01-2019",
                            "category_id": 13,
                            "body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
                            "end_date": "2019-01-12 02:56:15",
                            "live": 0,
                            "created_at": "2019-01-12 02:36:15",
                            "updated_at": "2019-01-12 02:36:15",
                            "pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
                            "category": {
                                "id": 13,
                                "user_id": 38,
                                "name": "et",
                                "created_at": "2019-01-12 02:36:15",
                                "updated_at": "2019-01-12 02:36:15"
                            }
                        }]
                    }]

当我尝试在Vue组件上访问它时，我无法定义

  div class="public" v-for="dataSet in  datas">
         <div v-for="announcements in dataSet">
            <dl v-for="announcement in announcements">
                <dt class="category" 
                    v-text="announcement.category"></dt>
                <h3 v-text="announcement.title"></h3>
                <dd v-text="announcement.body"></dd>
            </dl>
        </div>

    </div>

请帮助，在此先感谢

Answer 1

您需要通过以下方式声明vue组件：

var app = new Vue({
el: '#app', //the id of tour html
data: {
datas:  [{
          "id": 3,
           "title": "public",
           "created_at": "2019-01-12 02:37:28",
           "updated_at": "2019-01-12 02:37:28",
           "announcements": [{
                        "id": 3,
                        "user_id": 37,
                        "title": "Jumapili 13-01-2019",
                        "category_id": 13,
                        "body": "Saa 1030 asubuhi Consequuntur autem veniam ut voluptatibus. Qui impedit et ipsam est veritatis dolores. Voluptate quos harum eos nisi aut. Officiis nemo occaecati voluptas id modi. Sit omnis est autem aliquam sint quam libero.",
                        "end_date": "2019-01-12 02:56:15",
                        "live": 0,
                        "created_at": "2019-01-12 02:36:15",
                        "updated_at": "2019-01-12 02:36:15",
                        "pivot": {"viewer_id": 3, "viewable_id": 3, "viewable_type": "App\\Announcement"},
                        "category": {
                            "id": 13,
                            "user_id": 38,
                            "name": "et",
                            "created_at": "2019-01-12 02:36:15",
                            "updated_at": "2019-01-12 02:36:15"
                        }
                    }]
                }]
  }
})

访问Laravel返回的Javascript嵌套对象

1 个答案: