老师 我的代码 无论搜索什么都不出来

<template>

 <div>

<div class="search">

   <input v-model="keyword" class="searchInput" type="text" placeholder="输入城市名或者拼音">

</div>

  <div class="search-content" ref="searc">

    <ul>

      <li v-for="item of List" class="search-item border-bottom">{{item.name}}</li>

    </ul>

  </div>

 </div>

</template>

<script type="text/javascript">

  import Bscroll from 'better-scroll'

export default{

name:'CitySearch',

    props:{

      cities:Object

    },

    data (){

      return {

        keyword:'',

        List:[],

        timer:null

      }

    },

    watch:{

      keyword (){

       if (this.timer) {

        clearTimeout(this.timer)

       }

       if (!this.keyword) {

         this.List=[]

         return

       }

       this.timer=setTimeout(()=>{

          const result=[]

          for (let i in this.cities) {

            this.cities[i].forEach((value)=>{

               if (value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword>-1)) {

                result.push(value)

               }

            })

          }

          this.List=result

       },100)

      }

    },

    mounted(){

      this.scroll=new Bscroll(this.$refs.searc)

    }

}

</script>

<style scoped="">

   @import '~styles/varbles.styl'

   .search

     height:.72rem

     background:$bgColor

     padding:0 .1rem

     .searchInput

       box-sizing:border-box

       height:.62rem

       padding:0 .1rem

       line-height:.62rem

       text-align:center

       border-radius:.06rem

       width:100%

       color:#666

.search-content

     position:absolute

     overflow:hidden

     z-index:1

     top:1.58rem

     left:0

     right:0

     bottom:0

     background:#fff

     .search-item

       line-height:.62rem

       padding:.2rem

       background:#fff

       color:#666

</style>