Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Vue</title>
  <script src="lib/vue.js"></script>
  <style>
      form {
          border: 1px solid #ddd;
          padding:5px;
          width:225px;
          background: #efefef;
      }
      label{
          display: block;
          margin-top: 5px;
      }

      input, textarea, select, option {
          min-width: 200px;
      }

      button1{
          width:50px;
          font-size: 125%;
      }

    .card {
        background: #efefef;
        border:1px solid #ddd;
        margin-right:5px;
        padding:5px;
        width: 200px;
        float:left;
    }

    h3{
        min-height: 45px;
    }
  </style>
</head>
<body>

    <div id="app">
        <h1>Selected: {{ selectedBook }}</h1>
        <book
            v-for="book in books"
            :key="book.id"
            :book="book"
            @selected="selectedBook = $event"
            >
        </book>
    </div>

    <script type="module">

    import { BookComponent } from './BookComponent.js'

    var vm = new Vue({
        el: '#app',
        components: {
            'book': BookComponent,
        },
        data: {
            selectedBook: '',
            books : [
                {
                    id: 99,
                    title: 'C++ High Performance',
                    description: 'Write code that scales across CPU registers, multi-core, and machine clusters',
                    authors: 'Viktor Sehr, Björn Andrist',
                    publish_year: 2018,
                    price: 100000,
                    image: 'c++-high-performance.png'
                },
                {
                    id: 100,
                    title: 'Mastering Linux Security and Hardening',
                    description: 'A comprehensive guide to mastering the art of preventing your Linux system from getting compromised',
                    authors: 'Donald A. Tevault',
                    publish_year: 2018,
                    price: 125000,
                    image: 'mastering-linux-security-and-hardening.png'
                },
            ]
        }
    })
    </script>
</body>
</html>