playwright/tests/assets/reading-list/vue3.html

<link rel=stylesheet href='./style.css'>
<script src="./vue_3.1.5.js"></script>

<div id=root></div>

<script>

const app = Vue.createApp({
  template: `
    <app-header :bookCount='books.length'></app-header>
    <new-book @newbook='addNewBook'></new-book>
    <book-list :books='books'></book-list>
  `,

  data() {
    return {
      books: [
        {name: 'Pride and Prejudice' },
        {name: 'To Kill a Mockingbird' },
        {name: 'The Great Gatsby' },
      ],
    };
  },

  methods: {
    addNewBook(name) {
      console.log('here');
      this.books.push({name});
    }
  },
});

app.component('app-header', {
  template: `
    <h1>vuejs@${Vue.version}</h1>
    <h3>Reading List: {{ bookCount }}</h3>
  `,
  props: [ 'bookCount' ],
});

app.component('new-book', {
  data() {
    return {
      name: '',
    }
  },
  template: `
    <input v-model='name' @keypress.enter='onNewBook'><button @click='onNewBook'>new book</button>
  `,
  emits: ['newbook'],
  methods: {
    onNewBook() {
      this.$emit('newbook', this.name);
    }
  },
});
app.component('book-item', {
  template: `
    <div>
      {{ name }}
    </div>
  `,
  props: ['name'],
});

app.component('book-list', {
  props: ['books'],
  template: `
    <ol>
      <li v-for='book in books' :key='book.name'>
        <book-item :name='book.name'></book-item>
      </li>
    </ol>
  `,
});

app.mount('#root');

</script>