Доступ к вложенному объекту Javascript, возвращенному Laravel

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"
                        }
                    }]
                }]
  }
})