无法访问动态嵌套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引导程序：

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不同。前者在lieu.ville中查找名为item的属性，在这种情况下不存在。后者在lieu中查找item，然后在结果中查找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>