The App
component is getting pretty huge. Extract the list
to its own component. It should get the data from the prop
.
Your code should look like this:
App.vue
:
<template>
<div>
<participants-list :list="participants"></participants-list>
<!-- here is the form -->
</div>
</template>
<script>
import ParticipantsList from "./ParticipantsList.vue";
export default {
components: {ParticipantsList},
data() {
return {/* ... */};
},
methods: {
/* ... */
}
};
</script>
ParticipantsList.vue
:
<template>
<div>
<ol>
<li v-for="person in list">
<!-- bindings -->
</li>
</ol>
</div>
</template>
<script>
export default {
props: ['list']
};
</script>