Vue.js: Error using v-for
I want to render a table dynamically based on ajax requests. The backend is configured correctly and when I execute the code, the data from the response package is successfully loaded into my variables.
However, when viewed in a browser, the console logs the following error:
[Vue warn]: Failed to generate render function:
SyntaxError: Unexpected token - in
with(this){return _c('div',{attrs:{"id":"app"}},[_m(0),_v(" "),_c('table',[_c('tbody',[_c('tr',_l((header),function(head-item){return _c('th',{domProps:{"textContent":_s(head-item)}})})),_v(" "),_l((data),function(entry){return _c('tr',_l((entry),function(item){return _c('td',{domProps:{"textContent":_s(item)}})}))})],2)])])}
(found in <Root>)
My app.js file:
new Vue({
el: '#app',
data: {
header: [],
data: [],
},
mounted() {
axios.get('/contacts').then(response => this.load_response(response));
},
methods: {
load_response(response) {
this.header = response.data.header;
this.data = response.data.data;
}
}
});
And my html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TestProject</title>
<body>
<div id="app">
<table>
<tr>
<th>TestHeader/th>
</tr>
<tr>
<td>TestItem</td>
</tr>
</table>
<table>
<tr>
<th v-for="head-item in header" v-text="head-item"></th>
</tr>
<tr v-for="entry in data">
<td v-for="item in entry" v-text="item"></td>
</tr>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
When I try it in a browser, the first (dummy) table is displayed for half a second or so before it is hidden. Then the page is blank.
EDIT: the json received from the server is in the form
{
header: [foo, bar, foobar...],
data:[[foo, bar, footer], [foo2, bar2, foobar2], ...]
}
+3
source to share
1 answer
You cannot use a dash in an identifier in v-for. Try
<th v-for="headItem in header" v-text="headItem"></th>
Dash is not a valid character for any JavaScript variable.
+4
source to share