Vue.js: Component ที่มี props

23 มิ.ย. 2018, 18:45:37

1,861

อีกคุณสมบัติหนึ่งของ vue เราสามารถกำหนด props ใน component ได้ ดังตัวอย่างต่อไปนี้

index.html

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
        <div id="app">
            <ol>
                <u-item
                    v-for="item in universities"
                    v-bind:university="item"
                    v-bind:key="item.id">
               </u-item>
            </ol>
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

ตัวอย่างนี้เป็นการ bind ให้ university มีค่าเท่ากับ item นั่นเอง ซึ่งใน index.js ได้เขียนการแสดงผลไว้คือ university.name ซึ่งก็คือ item.name นั่นเอง

index.js

Vue.component('u-item', {
    props: ['university'],
    template: '<li>{{ university.name }}</li>'
})

var app = new Vue({
    el: '#app',
    data: {
      universities: [
        { id: 1, name: 'มหาวิทยาลัยอุบลราชธานี' },
        { id: 2, name: 'มหาวิทยาลัยขอนแก่น' },
        { id: 3, name: 'มหาวิทยาลัยมหาสารคาม' }
      ]
    }
})

 

มานพ กองอุ่น

มานพ กองอุ่น : Developer

ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com