خطای error: Elements in iteration expect to have در حلقه v-for ویو جی اس

من از فریم ورک ویو جی اس (Vue.js) استفاده می کنم و می خواهم یک لیست از فیلترها و ترکیبها ایجاد کنم. در نهایت این لیست را با استفاده از یک حلقه v-for نمایش داده ام که در کد زیر مشاهده می کنید. این کدها مربوط به فایل app.vue‌ است:

<template>
  <div class="container">
    <div class="col-md-8 offset-md-2 mt-4">
      <h3 >فیلتر ها و ترکیب ها (Filters & Mixins)</h3>
      <hr>
      <p>{{text | toUppercase | toLowercase}}</p>
      <hr>
      <input type="text" v-model="filterText">
      <ul class="list-unstyled mt-4" >
        <li v-for="item in fruitFilter">
          {{item}}
        </li>
      </ul>
      <hr>
      <app-list></app-list>
    </div>
  </div>
</template>

<script>
import List from './List'
export default {
    data(){
      return{
        text:'Web Site Roxo',
        fruits:['انگور','موز','کیوی','پرتغال'],
        filterText:'',
      }
    },
  filters:{
      toUppercase(value){
          return value.toUpperCase();
      }
  },
  computed:{
      fruitFilter(){
        return this.fruits.filter((element)=>{
           return element.match(this.filterText);
        })
      }
  },
  components:{
    appList:List
  }

}
</script>

<style>

</style>

کدهای زیر هم مربوط به فایل list.vue می باشد:

<template>
    <div>
        <h3 >فیلتر ها و ترکیب ها (Filters & Mixins)</h3>
        <hr>
        <input type="text" v-model="filterText">
        <ul class="list-unstyled mt-4">
            <li v-for = " item in fruitFilter ">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                fruits:['انگور','موز','کیوی','پرتغال'],
                filterText:'',
            }
        },
        computed:{
            fruitFilter(){
                return this.fruits.filter((element)=>{
                    return element.match(this.filterText);
                })
            }
        }
    }
</script>

<style>

</style>

ولی خطای زیر را دریافت می کنم و دلیل آن را نمی دانم

 WARNING  Compiled with 2 warnings                                                                              18:3
                                                                                                                    
Module Warning (from ./node_modules/eslint-loader/index.js):                                                        
error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src\App.vue:10:9:    
   8 |       <input type="text" v-model="filterText">                                                               
   9 |       <ul class="list-unstyled mt-4" >                                                                       
> 10 |         <li v-for="item in fruitFilter">                                                                     
     |         ^                                                                                                    
  11 |           {{item}}                                                                                           
  12 |         </li>                                                                                                
  13 |       </ul>                                                                                                  
                                                                                                                    
                                                                                                                    
1 error found.                                                                                                      
                                                                                                                    
Module Warning (from ./node_modules/eslint-loader/index.js):                                                        
error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src\List.vue:7:13:   
   5 |         <input type="text" v-model="filterText">                                                             
   6 |         <ul class="list-unstyled mt-4">                                                                      
>  7 |             <li v-for = " item in fruitFilter ">                                                             
     |             ^                                                                                                
   8 |                 {{item}}                                                                                     
   9 |             </li>                                                                                            
  10 |         </ul>                                                                                                
                                                                                                                    
                                                                                                                    
1 error found.                                                                                                      
                                                                                                                    
You may use special comments to disable some warnings.                                                              
Use // eslint-disable-next-line to ignore the next line.                                                            
Use /* eslint-disable */ to ignore all warnings in a file.                                                          

علت اررور نمیدونم چیه!؟

برای حل این مشکل در ویو جی اس نسخه ۲.۸.۱ باید فایل موجود در مسیر build/webpack.base.conf.js‌ را باز کرده و سپس خط های زیر را غیر فعال یا پاک کنید:

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

ولی اگر از نسخه های قبلی آن استفاده می کنید کافیست دستورهای زیر را پاک و یا غیر فعال کنید:

preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],

اگه از vue-cli 3  استفاده می کنی بهترین روش اینه که فایل vue.config.js رو باز کنی و بعد فرمان eslint رو برای پروژه جاری خودت غیر فعال کنی. در واقع یعنی کد زی رو به مجموعه کد خودت اضافه کنی:

module.exports = {
    chainWebpack: config => {
        config.module.rules.delete('eslint');
    }
}

همچنین اگه پروژه تو مسیری به نام config\index.js داره میتونی خط زیر رو داخل اون فایل قرار بدی:

useEslint: false,