سوال بپرسید
3

خطای 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.                                                          

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

برچسب ها:
گزارش سوال
پرسیده شده در
آمار بازدید: 274
شما از چه نرم افزاری برای برنامه نویسی ویو استفاده کردی؟ این خطا به eslint نرم افزار شما مربوط هست که اگر غیر فعالش کنی همه چیز حل میشه. یا می تونی از دستور elint-disable به هنگام خروجی گرفتن از پروژه ات استفاده کنی! – rezayaz در

2 پاسخ

1

برای حل این مشکل در ویو جی اس نسخه ۲.۸.۱ باید فایل موجود در مسیر 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/
      }
    ],

 

1

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

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

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

useEslint: false,