需求
如下圖所示的一個(gè)密碼隱藏/顯示按鈕
隱藏/顯示按鈕
理論上是一個(gè)很簡(jiǎn)單的功能，可以在
data里寫(xiě)一個(gè)boolean，然后通過(guò)@click改變boolean狀態(tài)控制密碼的隱藏/顯示。
但是問(wèn)題來(lái)了，這個(gè)隱藏按鈕是通過(guò)v-for循環(huán)輸出的。所以按照上面的寫(xiě)法，就會(huì)遇到看起來(lái)可以改變狀態(tài)成功（控制臺(tái)輸出）但實(shí)則并沒(méi)有任何反應(yīng)的情況。
在懷疑人生反復(fù)查閱后才得知，v-for渲染的列表不能通過(guò) arr[index] 修改數(shù)據(jù)，進(jìn)行視圖渲染。
解決方案：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)
}
如此這般，就行了。
感謝以下文章抬一手，救我于苦海之中：
vue使用v-for渲染列表后如何改變狀態(tài)？
Vue 列表渲染——v-for循環(huán)渲染細(xì)節(jié)
