vue.js: Error while using v-for

Question

I want to render a table dynamically, based on ajax requests. The Backend is set up properly and when I execute the code the data from the response package is successfully loaded into my variables.

However, when viewing it in the browser, 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 the browser, the first (dummy) table is shown for half a second or so, before it gets 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], ...]
}

Are you sure you have a head-item in header and item in data? I would try to debug it by isolating what it is. Console.log in load_response function what it is. Also comment out the one and the other for. — hol
– hol, Commented Jun 7, 2017 at 4:57
yes, I checked that the json is loaded into the variables correctly. Header is an array and data is an array of arrays — F.M.F.
– F.M.F., Commented Jun 7, 2017 at 5:01

Bert · Accepted Answer · 2017-06-07 05:19:14Z

4

You cannot use a dash in an identifier in v-for. Try

<th v-for="headItem in header" v-text="headItem"></th>

Dash isn't a valid character for any JavaScript variable.

edited Jun 7, 2017 at 5:19

answered Jun 7, 2017 at 5:13

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js: Error while using v-for

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related