Vue点击切换样式

Question

vue循环遍历多个input，点击其中一个，当前边框样式改变为红色，在点另一个，其边框也变为红色（有两个input边框为红色，其他为灰色）。现在我点击一个，全部变红，请问有好的解决方案吗？

<div v-for="(item, index) in inputLeng" :key="index">
  <input :placeholder="'点击' + item.str" style="margin-top: 10px" :class="{ 'borderColor': item.str }" @click="changeColor(index)" />
</div>

---

created() {
    this.inputLeng = Array(10).fill({'str': false})
   }
methods: {
    changeColor(item) {
      this.inputLeng[item].str = true
    }
  }

现在的情况

Answer 1

.fill()对象的话，所有对象都是指向同一个地址的。改一个动全部。

所以@click没问题，是测试用例没写好。

Answer 2

其实不用写js，css就完全可以满足

input:focus {
    ...
}

Answer 3

inputLeng: [{
          index : 0,
          str: false
        },
        {
          index : 1,
          str: false
        },
    ...
    ]

在inputLeng中增加下标即可，楼上只满足获取当前的

Answer 4

其实你的逻辑什么的都没有问题，就是你初始化数据有点问题。

array.fill(object)，会把array里面所有元素都换成object，注意是同一个object，你改其中任意一个，相当于在改所有的。

所以换种方式生成数据就好。

---

然后提个意见：
changeColor为啥不直接传item进来而传index再去获取对应的item呢。