需求
如下图所示的一个密码隐藏/显示按钮
隐藏/显示按钮
理论上是一个很简单的功能，可以在
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>
JS
changeVisible (index) {
let newArr = this.arrayList[index]
newArr.pswVisible = !newArr.pswVisible
Vue.set(this.accountsList, index, newArr)
}
如此这般，就行了。
感谢以下文章抬一手，救我于苦海之中：
