Vuejs output only one table and several rows

Question

Learning Vue:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
  </style>
</head>
<body>
    <div id="app">
        <friends v-for="friend in friends" :friend="friend"></friends>
    </div>
  <script>
      Vue.component('friends', {
        props    : ['friend'],
        template : `<table>
                    <tr><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
                  </table>`,
      })

    const vm = new Vue({ 
        el   : '#app',
        data : {
            friends : [
              {fname : 'Cornelius', lname : 'Johnson'},
              {fname : 'John',      lname : 'Waybe'},
              {fname : 'Neo',       lname : 'Anderson'},
            ],
        }
    })
  </script>
</body>
</html>

This works fine but it outputs several tables vs one table and it's rows.

I tried something like this

    <div id="app">
        <friends></friends>
    </div>

 Vue.component('friends', {
        props    : ['friends'],
        template : `<table>
                    <tr v-for="friend in friends" :friend="friend"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
                  </table>`,
      });

    const vm = new Vue({ 
        el   : '#app',
        data : {
            friends : [
              {fname : 'Cornelius', lname : 'Johnson'},
              {fname : 'John',      lname : 'Waybe'},
              {fname : 'Neo',       lname : 'Anderson'},
            ],
        }
    })

But that just outputs an empty table.

How can I output just one table and its rows?

estevanj · Accepted Answer · 2019-05-06 23:52:16Z

2

You should pass friends to the friends prop =).

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
  </style>
</head>
<body>
    <div id="app">
        <friends :friends="friends"></friends>
    </div>
  <script>
      Vue.component('friends', {
        props    : ['friends'],
        template : `<table>
                <tr v-for="friend in friends"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
              </table>`,
      })

    const vm = new Vue({ 
        el   : '#app',
        data : {
            friends : [
              {fname : 'Cornelius', lname : 'Johnson'},
              {fname : 'John',      lname : 'Waybe'},
              {fname : 'Neo',       lname : 'Anderson'},
            ],
        }
    })
  </script>
</body>
</html>

answered May 6, 2019 at 23:52

estevanj

3111 silver badge3 bronze badges

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

1 Comment

estevanj Over a year ago

In this case no. The friends data is outside the component so you have to pass to the friends component via props

Collectives™ on Stack Overflow

Vuejs output only one table and several rows

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related