Vue 组件问题，为什么组件中的item获取不到,感谢回答

Question

<div id="box">

<div class="content">

            <div class="swiper-container animated fadeInRightBig">

                <div class="swiper-wrapper" style="transform: translate3d(-288.5px, 0px, 0px)">

//这里是组件

                    <my-article v-for="item in list" v-bind:detial="item"></my-article>

//这里是组件

                </div>

                <!-- Add Pagination -->

                <div class="swiper-pagination"></div>

            </div>

</div>

</div>

<script>

    Vue.component('my-article', {

        prop: ["detail"],

        template: `<div class="swiper-slide">

                        <div class ="img" style="background:url(/Images/Admin.jpg) no-repeat center center;background-size: 100%;width:60%;margin:0 auto;">

                        </div>

                        <div class="Gradients">

                        </div>

                        <a href="/Home/Admin">

                            <p>{{item}}</p>

                        </a>

                    </div>`

    })

        var vm = new Vue({

            el: "#box",

            data: {

                    list: ["/Images/show1.png", "/Images/login.jpg", "/Images/lesson.jpg", "/Images/Attendance.png", "/Images/Member.jpg", "/Images/Questionnaire.jpg", "/Images/Survey.png", "/Images/work_and_rest_time.jpg"]

            }

        })

</script>

Answer 1

data里边没有item   当然获取不到