javascript - 无法访问动态嵌套的 JSON 属性

Question

我正在创建一个组件来显示基于 JSON 数据的表，但是当列的属性键是 lieu.ville 时，我的列没有显示任何内容。我该如何解决这个问题？

组件:

<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 {
    props: ['colss','columns','datas','urlajax'],

    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>

Vue Bootstrap :

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) {
                        MonThis.datas = data;
                        var index = 0;
                    }
                }
            });
        },

    },
    components: {modalTable},
});

示例数据:

[{
    "id": 6735,
    "formation_id": 8376,
    "statut_session_id": 1,
    "lieu_id": 1,
    "ref_session": "1 333 7020 19S 10 41 01",
    "prixSession": 1385,
    "intraInter": 1,
    "intraInSitu": 0,
    "commentaires": null,
    "created_at": "2019-03-25 17:31:29",
    "updated_at": "2019-03-25 17:31:29",
    "deleted_at": null,
    "periodes": [{
        "id": 5634,
        "session_id": 6735,
        "salle_id": 43,
        "date_debut": "2019-10-07",
        "date_fin": "2019-10-11",
        "commentaires": null,
        "created_at": "2019-03-25 17:31:29",
        "updated_at": "2019-03-25 17:31:29",
        "deleted_at": null
    }],
    "lieu": {
        "id": 1,
        "ville": "Paris",
        "cp": "75",
        "region": null,
        "displaySite": 1,
        "created_at": "2019-03-13 13:24:36",
        "updated_at": "2019-03-13 13:24:36"
    },
    "datesPeriodesConcat": "2019-10-07 au 2019-10-11",
    "lieu2Display": "Paris",
    "link": "<a class=\"btn btn-info\" href=\"\/session\/6735\">Session<\/a>"
}]

Answer 1

问题...

item['lieu.ville'] 与 item.lieu.ville 不同。前者在 item 中查找名为 lieu.ville 的属性，在本例中该属性不存在。后者在 item 中查找 lieu，然后在结果中查找 ville。

解决这个问题的一种方法是通过. 以编程方式拆分给定的对象键，以便可以解析正确的属性:

methods: {
  getValue(item, key) {
    return key.split('.').reduce((obj,k) => obj[k] || {}, item)

    /** The one-liner above is equivalent to the following **/

    const keys = key.split('.')
    for (const k of keys) {
      if (!item) break
      item = item[k]
    }
    return item || {}
  }
},

次优使用...

您可以像这样在模板中使用 getValue 方法:

<li v-for="item in datas">
  <div class="row">
    <div v-for="key in columns">
      <i>{{ 👉getValue(item, key) }}</i>
    </div>
  </div>
</li>

但是在模板中使用这样的方法是inefficient因为在每次渲染时都会调用该方法，每次都会产生相同的结果。

更好的东西...

你可以使用 computed property相反，它被缓存以避免在渲染时不必要的重新计算。计算属性(例如，命名为 tableData)将包含新的表数据，其列的项目已经解析:

computed: {
  tableData() {
    return this.datas.map(item => ({
      ...item,
      columns: this.columns.map(key => this.getValue(item, key))
    }))
  }
}

然后，您可以像这样在模板中使用 tableData 属性:

<li v-for="item in tableData">
  <div class="row">
    <div v-for="value in item.columns">
      <i>{{ 👉value }}</i>
    </div>
  </div>
</li>