v-for ESLint一直提示有问题不给过？ 我使用 :key 绑定数据总是出错，请大佬们指教。

Question

我在使用vue遍历一个列表的时候， 想拿到index属性， 绑定上key在ESlint 中一直编译不过去， 思考了很久， 还是没有实现， 实在没办法，但是不知道问题出在哪里， 请指教！

原始数据， key的属性我换成item， index都是一样的，

cartProduct 这是一个数组，

      <shop-list-item
          v-for="(item, index) in cartProduct"
          :key="index"
          :ItemProduct="item"
          @scClick="scClick"
          :ItemIndex="index"
        />
      <div>

然而我换成一个div去遍历，

      <div>
        <div v-for="(item, index) in cartProduct" :key="index" >
          {{item}} -- {{index}}
        </div>
      </div>

他还是一样的， 一旦我不去拿index属性， 就不会报错， 真的难搞。

Answer 1

你真的会vue吗?

Answer 2

<shop-list-item
          v-for="(item, index) in cartProduct"
          :key="index"
          :ItemProduct="item"
          @scClick="scClick"
          :ItemIndex="index"
        />
      <div>

在这段代码中v-for已经获取到了item和index，不明白为什么又要使用变量ItemProduct和ItemIndex再去获取一遍？
还有一个问题就是这里的item和index都是基于v-for作用域的变量，不是全局的。把item和index这些局部变量赋值给全局的变量ItemProduct和ItemIndex，是会报错的。这是由vue的dom决定的。
我之所以说item和index是有作用域的局部变量，是因为

// 加入有两个数组，对这两个数组进行循环，可以发现这里的item和index并不冲突。
// stars:['蔡徐坤',"苏有朋","范冰冰","李晨"],
// stars2:['111',"222","333","444"],
<ul>
    <li v-for="(item,index) in stars" :key="index">
        {{item}}{{index}}
    </li>
</ul>
<ul>
    <li v-for="(item,index) in stars2" :key="index">
        {{item}}{{index}}
    </li>
</ul>

由此可以说明item和index都是v-for作用域的局部变量，他不可以赋值给任何全局变量。