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>
    <button-grid></button-grid>
  `,

  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.component('color-button', {
  props: {
    color: String,
    enabled: Boolean,
    nested: {
      index: Number,
      value: Number,
    },
  },
  template: `
    <button :disabled='enabled' :class='color'>button {{nested.index}}</button>
  `,
});

app.component('button-grid', {
  render() {
    const buttons = [];
    const ColorButton = Vue.resolveComponent('color-button');
    for (let i = 0; i < 9; ++i) {
      buttons.push(Vue.h(ColorButton, {
        color: ['red', 'green', 'blue'][i % 3],
        enabled: i % 2 === 0,
        nested: {
          index: i,
          value: i + 0.1,
        }
      }, null));
    };
    return buttons;
  }
});

app.mount('#root');

</script>