Iview Select component reported an error ~

use the Select component in iview to report an error. Has anyone encountered it?

<template>
  <div id="root">
    <Select
      key="123"
      v-model="model1"
      style="width:200px">
      <Option
        v-for="item in cityList"
        :value="item.value"
        :label="item.label"
        :key="item.value"/>
    </Select>
  </div>
</template>
data () {
    return {
      breadcrumb: [],
      dropdown: [],
      btninfo: {},
      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      model1: ""
    }
  }
The

page reported an error without writing anything.

clipboard.png

May.09,2022

What is wrong with this sentence is that you may (actually do not) trigger an infinite loop (endless loop). Baidu has many solutions.
I have tried two: 1. Add id to the tag of option and then ask id to give a parameter PP Don't repeat 2. The value of key is not unique. Generally, it uniquely identifies most of the answers on
Baidu. I like this sentence: https://blog.csdn.net/a553478...
changes the data in data. The data changes in data will call the render function again. This is the sentence from the new rendering component

.

here is a piece of code I wrote with jsx vue-class-component

<FormItem label=":" prop="policy">
  <Select 
    style="width: 80%;"
    value={this.submitData.policy}
    on-input={e => { this.submitData.policy = e }}
    placeholder="">
      {
        this.policyList.map(i => {
          return <Option label={i.label} value={i.value}></Option>
        })
      }
  </Select>
</FormItem>

the following code is the answer

<Select v-model="model11">
    <Option v-for="(item, index) in cityList" :value="item.value" :key="index">{{ item.label }}</Option>
</Select>

feels like ISelect and Root are nested in a loop.
use the code you posted above alone is not wrong https://jsfiddle.net/edx6gyp5/


code not all the code you posted no problem in other places


first of all, this is the Vue alarm, not the iview problem. This alarm appears in the source code flushSchedulerQueue function because it detects the possibility of infinite loops when the data is updated, for example, the data is recursively modified, the values passed by the parent component are modified in the child components, and the traversed array is incorrectly modified. There is no problem directly using your code to test, and there is no way to determine what the problem is. You can see if the rest of the code or page is likely to cause this problem.


have you solved this problem? I also encountered the same


vue.js version updated to the latest line, which I just encountered and solved.

Menu