How to fetch json data using vuejs component?

Question

I want to access json data from external file using vue component but I am not able to get any output in web page.The below is my code which I have tried.Can anyone help me out?

The below is Json data that included the models which I want to display on web page

{
 "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>

• David: @mplungjan axios is working fine without component and I am using local file called j.json.
• Lana: Try use arrow function axios.get(url).then((res) => {this.myData = res.data.models;}); I suppose in vm is not what you expect.

Answer 1

1. As you might have noticed white running the provided snippet, template can have only one child element, using a v-for on the outermost element will create multiple children.

2. this in your case is not referring to the vue-component in fetchData function.

methods:{
	fetchData() {
 var url = '';
 axios.get(url)
 .then((res) => {
 this.myData = res.data;
		});
 }
 },

Try replacing with the above snippet in your code.

Answer 2

this on your code is not referring to your Vue Component.

I think, the easiest way to solve this issue is by creating a new variable to refer to your Vue Component

fetchData: function() {
 var url = 'j.json';
 var self = this;
 axios.get(url)
 .then(function(res) {
 self.myData = res.data.models;
 });
 }