Vue | v-for遍历的数组元素无法动态渲染

需求

如下图所示的一个密码隐藏/显示按钮

隐藏/显示按钮

理论上是一个很简单的功能，可以在data里写一个boolean，然后通过@click改变boolean状态控制密码的隐藏/显示。

但是问题来了，这个隐藏按钮是通过v-for循环输出的。所以按照上面的写法，就会遇到看起来可以改变状态成功（控制台输出）但实则并没有任何反应的情况。

在~~怀疑人生~~反复查阅后才得知，v-for渲染的列表不能通过 arr[index] 修改数据，进行视图渲染。

解决方案：this.$set(array, index, newArray)方法。

例：
HTML

<div v-for="(array, index) in arrayList">
  <!-- ... -->
  <input :type="arrayList[index].pswVisible?'text':'password'" :value="array.password" disabled>
  <a>
    <img @click="changeVisible(index)" :src="array[index].pswVisible?visibleSrc:InvisibleSrc">
  </a>
</div>

changeVisible (index) {
  let newArr = this.arrayList[index]
  newArr.pswVisible = !newArr.pswVisible
  Vue.set(this.accountsList, index, newArr)
}

如此这般，就行了。

感谢以下文章抬一手，救我于苦海之中：

vue使用v-for渲染列表后如何改变状态？
Vue 列表渲染——v-for循环渲染细节