javascript - Vue.js 消费 json

Question

我的问题是这个 json。 http://dev-rexolution.pantheonsite.io/api/noticias

我只需要使用 vuejs 2 使用数组的第一个元素才能显示它，使用我工作过但没有 vuejs 的控制台。

此控制台日志工作:console.log(response.data[0].title[0].value);

<template>
  <div class="Box Box--destacado1">
    <div class="Media Media--rev">
      <div class="Media-image">
          </div>
              <div class="Media-body">
                <span class="Box-info">{{ noticias[0].field_fecha[0].value}}</span>
                <h3 class="Box-title">
                 <a href="">{{ /*noticias[0].title[0].value */}}</a>
                </h3>
               <p class="Box-text">{{/*noticias[0].field_resumen[0].value*/}}</p>
              </div>
            </div>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    noticias: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get(`http://dev-rexolution.pantheonsite.io/api/noticias`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.noticias = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Answer 1

您可能遇到了一个问题，即您的模板试图显示在 AJAX 请求完成之前不存在的数据。

我会设置一个标志来指示数据何时可用，并使用 v-if 切换显示。例如

模板

<div class="Media-body" v-if="loaded">

脚本

data () {
  loaded: false,
  noticias: [],
  errors: []
}

并在您的创建 Hook 中

.then(response => {
  this.loaded = true
  this.noticias = response.data
})

---

或者，使用一些虚拟数据设置您的初始 noticias 数组

noticias: [{
  title: [{ value: null }]
  field_fecha: [{ value: null }]
  field_resumen: [{ value: null }]
}]