<template>
  <h3>Todo List</h3>
  <p>In this example, there are three elements on the root level of the component so we use v-bind="$attrs" to define which element should receive the fallthrough style attribute that gives green background-color.</p>
  <ul>
    <todo-item
      v-for="x in items"
      :key="x"
      :item-name="x"
      style="background-color: lightgreen;"
    />
  </ul>
  <input placeholder="Add things to do here" v-model="newItem" @keydown.enter="addItem">
  <button @click="addItem">Add</button>
</template>

<script>
export default {
  data() { 
    return {
      newItem: '',
      items: ['Buy apples','Make pizza','Mow the lawn']
    };
  },
  methods: {
    addItem() {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
}
</script>

<style>
  ul {
    width: 150px;
    list-style-type: none;
    padding-left: 10px;
  }
</style>                  

<template>
    <div class="pinkBall"></div>
    <li v-bind="$attrs">{{ itemName }}</li>
    <div class="pinkBall"></div>
</template>

<script>
export default {
    props: ['itemName']
};
</script>

<style>
    .pinkBall {
        display: inline-block;
        background-color: lightpink;
        padding: 5px;
        margin: 2px;
        border-radius: 50%;
    }
    li {
        margin: 0;
        border-radius: 10px;
        padding: 5px 10px;
    } 
</style>                  

import { createApp } from 'vue'

import App from './App.vue'
import TodoItem from './components/TodoItem.vue'

const app = createApp(App)
app.component('todo-item', TodoItem)
app.mount('#app')