iview Select 组件报错~

Question

使用iview 里的 Select组件报错啊， 大家有没有人遇到啊....

<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: ''
    }
  }

页面里啥也没写 就这些东西 就报错....

谁知道咋回事呀。。。感谢帮助哦

Answer 1

这句报错的就是你有一个可能（其实并没有）引发无限循环（死循环）的写法，百度有很多解决方法的。
我试过两种：1、option的标签里加id 然后让id来个参数++别重复 2、key值不唯一，一般以唯一标识
百度上的大多数答案，就这个我喜欢一句话：https://blog.csdn.net/a553478...
改变了data里面的数据，data里面的数据变化又会调用render函数，从新渲染组件 就这句话

下面是我结合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>

下面这段代码，就是答案

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

Answer 2

感觉像是ISelect和Root两个组件循环嵌套了。
单独使用你上面贴的代码是没有报错的 https://jsfiddle.net/edx6gyp5/

Answer 3

代码没贴全 你贴的代码没问题 问题出在其他地方

Answer 4

首先这是Vue的报警，不是iview的问题。这个告警出现在源码flushSchedulerQueue函数里，是因为检测到数据更新时有无限循环的可能性，例如递归修改了数据、父组件传的值在子组件里被修改、遍历的数组被不正确的修改等，直接用你这段代码测试是没有问题的，没法确定问题到底出在哪，你再看看其余部分代码或页面是不是有可能造成这个问题的地方。

Answer 5

解决了吗这个问题，我也遇到了一样的

Answer 6

vue.js版本更新到最新就行了，刚刚我也遇到，解决了。