Trying to grasp the concept of v-for in Vue JS, especially since I am a newcomer to this framework.
Since I am utilizing Django, custom delimiters are necessary. I have a script example that appends a list of objects to a data property:
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#app',
data: {
loading: true,
datasetFilesArray: null
},
methods: {
datasetFiles: function () {
axios.get('api/list_all_data')
.then(response => {
this.loading = false;
this.datasetFilesArray = response.data;
})
.catch(error => {
console.log(error)
});
}
},
beforeMount() {
this.datasetFiles()
}
});
At first, datasetFilesArray is null, but once the response arrives, it gets replaced by an object.
However, when attempting to use this in HTML tags like so:
...
<tr v-for="content in datasetFilesArray">
<th class="align-middle">
<a href="">[[content.file_name]]</a>
</th>
<th class="align-middle">[[content.date]]</th>
</tr>
...
An error pops up stating that
Property or method "content" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.content to data as shown below:
...
data: {
loading: true,
datasetFilesArray: null,
content: null
},
...
In contrast, the example provided at https://v2.vuejs.org/v2/guide/list.html#v-for-with-an-Object, does not initialize the value keyword and yet it seems to work fine.
Am I overlooking something?
Update
I considered the possibility that the property might be taken from the meta tag such as
<meta http-equiv="X-UA-Compatible" content="ie=edge">content to datasetItems but encountered the same error.
Update 2
Here's an example of my page: https://codepen.io/akshaybabloo/pen/ExxexxE
If you check the developer tools, you'll notice the error I mentioned earlier.