Discovering Vue:
<!DOCTYPE html>
<html>
<head>
<title>Exploring Vue Components</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 code functions correctly but displays multiple tables instead of a single table with rows.
I attempted the following approach:
<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'},
],
}
})
However, it only displays an empty table.
Is there a way to render just one table along with its rows?