我的问题是这个 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>
最佳答案
您可能遇到了一个问题,即您的模板试图显示在 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 }]
}]
关于javascript - Vue.js 消费 json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45746696/