TypeError: Cannot read property 'parroquia' of undefined with VUE.js

All render well until it reaches the object of the json parish .. I do not understand why it does not?
Because when I run the console.log brings me the correct data here I leave part of the code if anyone can help me .. Thank you very much
# JSON: 
{
    "id": 1,
    "cedula": "14748547",
    "nombres": "Pepito",
    "apellidos": "¨Pregunton",
    "email": "pepitopregunton@gmail.com",
    "telefono": "02128477447",
    "direccion": "La Palomera",
    "parroquia_id": 617,
    "parroquia": {
        "id": 617,
        "parroquia": "BARUTA",
        "municipio_id": 181,
        "municipio": {
            "id": 181,
            "municipio": "BARUTA",
            "estado_id": 13,
            "estado": {
                "id": 13,
                "estado": "MIRANDA",
                "activo": 0
            }
        }
    },
    "canaimas": [
        {
            "id": 1,
            "modelo": "MG10T",
            "deleted_at": null,
            "activo": 1,
            "pivot": {
                "beneficiario_id": 1,
                "canaima_id": 1,
                "serial_canaima": "454DS5FDFD55",
                "descripcion": "esta rayada"
            }
        },
        {
            "id": 6,
            "modelo": "Canaima Docente VIT D2100",
            "deleted_at": null,
            "activo": 1,
            "pivot": {
                "beneficiario_id": 1,
                "canaima_id": 6,
                "serial_canaima": "kjdfbksjhgr43",
                "descripcion": "NINGUNA"
            }
        }
    ]
}
# html
<div class="modal fade" id="show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4>Detalles</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6">
                        <label for="cedula">Cédula </label>
                        <input type="text" name="cedula" class="form-control" readonly="readonly" v-model="beneficiario.cedula">
                        <label for="nombres">Nombres</label>
                        <input type="text" name="nombres" class="form-control" readonly="readonly" v-model="beneficiario.nombres">
                        <label for="apellidos">Apellidos</label>
                        <input type="text" name="apellidos" class="form-control"  readonly="readonly" v-model="beneficiario.apellidos">
                        <label for="email">Email</label>
                        <input type="text" name="email" class="form-control" readonly="readonly" v-model="beneficiario.email">
                        <label for="telefono">Teléfono</label>
                        <input type="text" name="telefono" class="form-control" readonly="readonly" v-model="beneficiario.telefono">
                    </div>
                    <div class="col-sm-6">
                        <label for="direccion">Direccion</label>
                        <textarea v-model="beneficiario.direccion" class="form-control" readonly="readonly" name="direccion"></textarea>
                        <label for="estado">Estado</label>
                        <input type="text" name="estado" class="form-control" v-bind="beneficiario.parroquia.parroquia" readonly="readonly">
                        <label for="parroquia">Municipio</label>
                        <input type="text" name="municipio" class="form-control" v-bind="beneficiario.parroquia.municipio.municipio" readonly="readonly">
                        <label for="telefono">Parroquia</label>
                        <input type="text" name="parroquia" class="form-control" v-bind="beneficiario.parroquia.municipio.estado.estado" readonly="readonly">
                    </div>
                    <div class="col-sm-12">
                        <table class="table table-condensed table-hover">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Modelo</th>
                                    <th scope="col">Serial</th>
                                    <th scope="col">Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in beneficiario.canaimas">
                                    <th scope="row">@{{item.id}}</th>
                                    <td>@{{item.modelo}}</td>
                                    <td>@{{item.pivot.serial_canaima}}</td>
                                    <td>@{{item.pivot.descripcion}}</td>
                                </tr>
                            </tbody>
                        </table>   
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="Guardar">
            </div>
        </div>
    </div>

# vue.js
<script type="text/javascript">
    new Vue({
        el: '#beneficiario',
        created: function () {
            //this.showBeneficiario();
        },
        data: {
            beneficiario: [],
            errors: [],
        },
        methods: {
            showBeneficiario: function (id) {
                var url = 'beneficiario/'+ id;
                   axios.get(url).then(response => {
                   this.beneficiario = response.data;
                   $('#show').modal('show');
                   console.log(response.data.parroquia.parroquia);
                   console.log(response.data.parroquia.municipio.municipio);
                   console.log(response.data.parroquia.municipio.estado.estado);
               });
        }
    }
    });</script>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read property 'parroquia' of undefined with VUE.js #35

JSON:

html

Detalles

vue.js

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TypeError: Cannot read property 'parroquia' of undefined with VUE.js #35

Description

JSON:

html

Detalles

vue.js

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions