使用NuxtJS动态搜索栏

时间:2018-08-07 07:32:58

标签: javascript vue.js vuejs2 nuxt.js

嗨,我在搜寻时出现错误,但我不知道怎么办? 所有数据都是负载...

错误: com.Commune.toLowerCase不是函数

  export default {

    props: ['communes'],

    data: function () { return { search: '' } },

    computed: {

      filteredCommunes: function() {
        var self = this;
        if(this.search == '') { return null }
        else { return this.communes.filter(function(com){return com.Commune.toLowerCase().indexOf(self.search.toLowerCase())>=0;}) }
      }

    }

  }
<template>
  <div class="search-bar-main">
      <label>Trouvez votre commune</label>

      <input v-model="search" placeholder="Bruxelles, Namur, Gesves,..."/>

      <ul  class="searchList">
        <li v-for="(commune, index) in filteredCommunes" :key="index"><nuxt-link :to="{ path: '/communes/'+commune.Commune }">{{ commune.Commune }}</nuxt-link></li>
      </ul>

      <div><a href="#"><i class="fas fa-angle-right"></i>Découvrir une commune au hasard ?</a></div>
  </div>
</template>

0 个答案:

没有答案