Axios + v-for fetches data from API, but don't render it properly

Hi,

I am delighted to become part of the Vue.js community and i am really looking forward to work with Vue.js. Right now I am working on a small web application that renders data which is fetched from an API. I use Axios and v-for to create html divs based on the returned data.

Everything works as it is intented to do, but in the end there is no data displayed in the html containers, which are created in correct number though.

The weird thing is that when I copy/paste the code to jsfiddle it works just fine, but it does not in my environment.

Note: The API data (JSON) is a bit of confusing since it is some kind of array-in-array structure (I already talked with the provider and they have some good reason to structure this endpoint as it is). However it returns the required data just fine.

This is my related SO thread (let me know if I should remove this here):

Similar issue on Stackoverflow from 2018 which isn’t solved yet as well:

Now I really don’t know on how to proceed.

In advance thank you so much for any insight/hint that brings me a step further.

###Jonas

This is my Vue.js function:

          var app = new Vue({
            el: '#Rank',
            data: {
              info: []
            },
            created() {
              axios
                .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
                .then(response => {
                  this.info = response.data.api.standings[0];
                  console.log(response.data.api.standings[0]);
                });
            }
          });

This is the HTML Part:

          <div class="table" id="Rank">
            <div><p>Rank</p></div>
            <div v-for="rank in info" class="rank"><p>{{ standings.rank }}</p></div>
          </div>

This is how the JSON is structured:

{
	"api": {
		"results": 1,
		"standings": [
			[{
					"rank": 1,
					"team_id": 85,
					"teamName": "Paris Saint Germain",
					"logo": "https://media.api-football.com/teams/85.png",
					"group": "Ligue 1",
					"forme": "DLWLL",
					"description": "Promotion - Champions League (Group Stage)",
					"all": {
						"matchsPlayed": 35,
						"win": 27,
						"draw": 4,
						"lose": 4,
						"goalsFor": 98,
						"goalsAgainst": 31
					},
					"home": {
						"matchsPlayed": 18,
						"win": 16,
						"draw": 2,
						"lose": 0,
						"goalsFor": 59,
						"goalsAgainst": 10
					},
					"away": {
						"matchsPlayed": 17,
						"win": 11,
						"draw": 2,
						"lose": 4,
						"goalsFor": 39,
						"goalsAgainst": 21
					},
					"goalsDiff": 67,
					"points": 85,
					"lastUpdate": "2019-05-04"
				},
                  [...]
               }
			]
		]
	}
}

And the v-for output, which creates the correct amount of html divs, but without any data…:

enter image description here

This is the info from Vue dev-tools:

enter image description here

25

After 4 hours of searching, I got it.

This is what worked for me:

Change the Delimiters from curly brackets into anything else, so there is no corrosion with Django (which I use for my web application) which uses curly brackets for its variables as well.

Working solution as per initial issue:

JS:

  var app = new Vue({
    delimiters : ['[[',']]'],
    el: '#Rank',
    data: {
      info: []
    },
    created() {
      axios
        .get("https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/leagueTable/" + league_id)
        .then(response => {
          this.info = response.data.api.standings[0];
          console.log(response.data.api.standings[0]);
        });
    }
  });

HTML:

          <div id="app">
          <div class="table" id="Rank">
          <div><p>Rank</p></div>
          <div v-for="standings in info" class="rank"><p>[[ standings.rank ]]</p></div>
          </div></div>