JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
  <div id="app">

    <ul v-for="(book, idx) in books" class="book" :key="idx">
      <li>{{ book.name }}</li>
      <li>{{ book.author }}</li>
      <li>{{ book.publishedAt }}</li>
    </ul>

    <hr>

    <!-- v-bind="book" 會自動解構 -->
    <my-component
      v-for="(book, idx) in books"
      :key="idx"
      
      v-bind="book"
    ></my-component>
    
  </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" key="name" v-model="name"></div>
      <div>作者: <input type="text" key="a" v-model="author"></div>
      <div>出版日: <input type="text" key="b" v-model="publishedAt"></div>
  </div>`,
	props: ['name', 'author', 'published-at'],
});

app.mount('#app');