JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  <div id="app">

    <ul v-for="book in books" class="book">
      <li>{{ book.name }}</li>
      <li>{{ book.author }}</li>
      <li>{{ book.publishedAt }}</li>
    </ul>

    <hr>

    <my-component v-for="book in books" :key="book.name" 
      :book-info="book" />
  </div>

SCSS

#app {
  display: block;
  padding: 1rem;
  padding-top: 2rem;
  font-size: 1rem;
}

.book {
  margin-bottom: 2rem;
}

.child-app {
  padding: 1rem;
  background-color: #ddd;
  margin-top: 1rem;
  line-height: 2;
}

li {
  list-style-type: square;
  list-style-position: inside;
}

input {
  width: 65%;
  font-size: 0.9rem;
  padding: 2px 3px;
}

JavaScript

const app = Vue.createApp({
  data() {
    return {
      books: [
      	{
          name: '0 陷阱！0 誤解！8 天重新認識 JavaScript！',
          author: 'Kuro Hsu',
          publishedAt: '2019/09'
        },
        {
          name: '重新認識 Vue.js',
          author: 'Kuro Hsu',
          publishedAt: '2021/02'
        },
      ]
    }
  }
});

app.component('my-component', {
  template: `
  <div class="child-app">
    <div>書名: <input type="text" v-model="bookInfo.name"></div>
    <div>作者: <input type="text" v-model="bookInfo.author"></div>
    <div>出版日: <input type="text" v-model="bookInfo.publishedAt"></div>
  </div>`,
  props: {
    'bookInfo': {
      type: Object
    }
  }
});

app.mount('#app');