Can't access dynamic nested json property


#1

Hello, I’m trying to access a json object in a component but when in my columns array there is ‘lieu.ville’ nothing is displayed in my v-for which parse the columns I want to display the values.

here is the component :

<template>

    <ul class="list-group">
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div v-for="col in colss" class="" :class="bootstrapClass">{{col | capitalize}}</div>
            </div>
        </li>

        <li v-for="(item,index ) in datas" class="list-group-item" :key="item['id']">
            <div class="row">
                <div v-for="(value,i) in columns" class="" :class="bootstrapClass">
                    <i>{{ item[value] }}</i>
                </div>
            </div>
        </li>
    </ul>

</template>

<script>

    var csrf_token = $('meta[name="csrf-token"]').attr('content');

    export default {

        name: 'modalTable',


        data(){
            return {


            }
        },

        props: ['colss','columns','datas','urlajax'],

        /*methods: {

            switchButton: function(event){

            }

        },*/

        computed: {
            bootstrapClass: function() {
                return 'col-sm-' + (12 / this.colss.length );
            },


        },

        mounted: function () {

            console.log("testtttt");

        },

        filters: {

            capitalize: function (str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            }

        },

    }
</script>

Here is the js

var listSessions = new Vue({
    el: '#listmodalSessions',
    data: {
        // collection des propriétés
        columns: ['id', 'ref_session', 'datesPeriodesConcat','lieu.ville'],
        // collection d'affichage
        colss: ['Id', 'Ref Session', 'Dates','Ville'],

        datas: [],

        urlPrefix:'/admin/User/' ,

    },
    methods: {
        showModal () {
            $('#sessionsModal').modal('show');
        },
        hideModal () {
            $('#sessionsModal').modal('hide');
        },

        // id Item représente l'id du user auquel appartiennent les permissions de la liste
        getDatas(idItem){

            var MonThis = this;
            MonThis.datas = [];

            $.ajax({
                url: this.urlajax,
                cache: false,
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    if (jqXHR.status === 200) {
                        // console.log('*****data****');
                        // console.log(data);
                        // console.log('*****MonThis.datas ********');

                        MonThis.datas = data;
                        var index = 0;

                    }
                }
            });
        },

    },
    components: {modalTable},
});

Every fields displays except the value of the column ‘lieu.ville’, have you a solution ? Thanks for help. :slight_smile: