以前の記事のjqueryでの書き方です。
<div id=“test”>
<script src=“jquery.min.js”></script>
<script>
$.getJSON(‘test.json’,function(json){
var html =‘<ul>’;
for (vari=0; i<json.items.length; i++){
html += ‘<li>’+ json.items[i].title + ‘</li>’;
}
html+=‘</ul>’;
$(‘#test’).html(html);
});
</script>
vue.jsとaxiosのバージョンです。
<div id=“test”>
<ul>
<li v-for = “item in items”>{{item.title}}</li>
</ul>
</div>
<script src=“https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js”></script>
<script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
<script>
var app = new Vue({
el: ‘#test’,
data:{
items:{}
},
mounted:function(){
var self = this;
axios.get(‘test.json’).then(function(res){
self.items = res.data.items;
});
// $.getJSON(test.json’,function(json){
// self.items = json.items;
// });
}
})
</script>