时间戳

首页 > 解决方案 > vue中的axios嵌套json

javascript - vue中的axios嵌套json

问题描述

我正在尝试在 vue.js 中使用 axios 一个 json 数组。但我无法访问嵌套 JSON 的值。

.then( response => (this.dateData = response.data))

工作的水平。但不是更多。

JSON结构是

{
    "date":"2018-05-31",
    "closed":false,
    "meals":
    [  
      {  
         "id":1,
          "name":"Name here",
          "category":"Categoryname",
          "prices":{  
              "students":2.75
           }
      },
      {
          ....
      }
    ]  
},
{  
    "date":"2018-06-06",
    "closed":false,
    ....
}

所以我可以收到日期的值并在 vue 中关闭

<div v-for="date in dateData">
 {{date.date}}
 {{date.closed}}
</div>

在 vue.js 中使用date.dateoder 。date.closed但是我怎样才能得到餐点.名称或餐点.价格.学生的价值？

标签： javascriptarraysjsonvue.jsaxios

解决方案

您可以嵌套v-for循环（当然还可以添加一些样式，例如表格或任何您想要的样式）。只需将每个循环放在它自己的 html 元素中：

new Vue({
  el: '#demo',
  data() {
    return {
      dateData: []
    }
  },
  mounted() {
    axios.get("https://openmensa.org/api/v2/canteens/79/meals").then(value => {
      this.dateData = value.data
    }).catch(error => {
    	// do something
    })
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="demo">
  <div v-for="date in dateData">
    <h3>{{date.date}} - {{date.closed}}</h3>
    <div v-for="meal in date.meals">
      <p><strong>{{ meal.name }}</strong></p>
      <p>{{ meal.category }}</p>
      <div v-for="(v, k) in meal.prices">
        {{ k }} : {{ v }}
      </div>
    </div>
  </div>
</div>

推荐阅读