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

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

برچسب ها:
پرسیده شده در: 3 سال قبل
آمار بازدید: 749
mehdiSh (25)
بیش از ۱ سال عضویت در روکسو بیش از ۱ سال عضویت در روکسو
شما از چه نرم افزاری برای برنامه نویسی ویو استفاده کردی؟ این خطا به eslint نرم افزار شما مربوط هست که اگر غیر فعالش کنی همه چیز حل میشه. یا می تونی از دستور elint-disable به هنگام خروجی گرفتن از پروژه ات استفاده کنی! - rezayaz در 3 سال قبل
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/
      }
    ],

 

ارسال شده در: 3 سال قبل
masoudsalehi (1398)
بیش از ۲ سال عضویت در روکسو بیش از ۲ سال عضویت در روکسو دارای 1000 کارما دارای 1000 کارما دارای 10 پاسخ صحیح دارای 10 پاسخ صحیح نظرات دریافتی:‌ بیش از 50 نظرات دریافتی:‌ بیش از 50 ارسال کننده پاسخ با 25 رای ارسال کننده پاسخ با 25 رای
1

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

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

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

useEslint: false,

 

ارسال شده در: 3 سال قبل
جهت ارسال پاسخ ابتدا عضو سایت شوید.
اینستاگرام روکسو

روکسو در اینستاگرام

به جمع هزاران کاربر اینستاگرامی روکسو بپیوندید.