Question

我需要显示4月的值。代码：

{{my_dates['2018-04-23']}}

显示：

{
   "april":0,
   "may":0,
   "june":0,
   "july":0,
   "august":0,
   "september":0,
   "october":0,
   "income_trips":"0.00",
   "med_services":"0.00",
   "food_services":"0.00",
   "accom_services":"0.00",
   "collegium":"0.00",
   "parking":"0.00",
   "wash":"0.00",
   "other":"0.00",
   "balance":"0.00",
   "employees":0,
   "season_employees":0,
   "complaints":0,
   "reviews":0
}

我尝试过：

 {{my_dates['2018-04-23']['april']}}

显示为0，但出现错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 'april' of undefined"

Follow json应该在我的my_dates http://vpaste.net/3A0Th

中

应用代码：

var app = new Vue({
  el: '#app',
  data: {
    my_dates: {},
  },

    methods: 
    {
        getTableData: function()
        {
              // GET /someUrl
          this.$http.get('http://127.0.0.1:8000/ponizovka_get_data').then(response => {
            // get body data
            this.my_dates = response.body;

          }, response => {
            // error callback
          });
        }
    },

    created: function(){
        this.getTableData()
    }

})

Answer 1

{{ my_dates['2018-04-23']['april'] }}

您是对的。这是访问此属性的正确方法，但是错误可能与在赋值或异步操作之前显示此值有关。您可以通过检查v-if，短路，使用计算属性（@EmileBergeron建议）甚至方法来解决问题。

通过选中v-if

修复

<div v-if="my_dates && my_dates['2018-04-23']">
  {{ my_dates['2018-04-23']['april'] }}
</div>

使用短路修复

{{ my_dates && my_dates['2018-04-23'] && my_dates['2018-04-23']['april'] }}

使用计算的属性修复（@EmileBergeron建议）

<span>{{ april }}</span>

computed: {
  april () {
    if (!this.my_dates || !this.my_dates['2018-04-23'])
      return null;
    return this.my_dates['2018-04-23']['april'];
  }
}

使用方法修复

{{ getMyDate('2018-04-23', 'april') }}

methods: {
  getMyDate (date, month) {
    if (!this.my_dates || !this.my_dates[date])
      return null;
    return this.my_dates[date][month];
  }
}

还有其他方法，例如可选链接目的或idx。

Answer 2

这是因为，可能是您从异步源（从API或其他内容获取）中获取数据。除非该数据可用，否则vue会尝试找到将为my_dates['2018-04-23']的{{1}}，因此您将收到该错误。

等待直到获取数据，然后显示它。

您可以使用undefined：

v-if

即使在使用v-if之后，您仍然可能仍然会收到该错误，因此请尝试使用计算得出的值。

希望对您有帮助。

如何显示嵌套的json值？

2 个答案: