我想使用 vue 组件从外部文件访问 json 数据,但我无法在网页中获得任何输出。以下是我尝试过的代码。有人可以帮助我吗?
下面是Json数据,其中包含我想要在网页上显示的模型
{
"models": [
{
"title": "IRIS",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 3
},
{
"title": "LILAC",
"project": "ABC",
"category": "DOUBLE",
"bedrooms": 4
},
{
"title": "ASTER",
"project": "ABC",
"category": "SINGLES",
"bedrooms": 4
}
]
}
Vue.component('single-model', {
data: function() {
return {
myData: []
}
},
template: `<div v-for="model in myData">
<p>{{model.title}}</p>
<hr>
</div>`,
created: function() {
this.fetchData();
},
methods: {
fetchData: function() {
var url = 'j.json';
axios.get(url)
.then(function(res) {
this.myData = res.data.models;
});
}
}
});
var vm = new Vue({
el: '#app',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<single-model></single-model>
</div>
最佳答案
您可能已经注意到白色运行提供的代码片段,
template
只能有一个子元素,在最外层元素上使用v-for
将创建多个 child 。this
在您的情况下并不是指fetchData
函数中的 vue 组件。
methods:{
fetchData() {
var url = '';
axios.get(url)
.then((res) => {
this.myData = res.data;
});
}
},
关于javascript - 如何使用vuejs组件获取json数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60264410/