vue計(jì)算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案
vue的計(jì)算屬性
計(jì)算屬性可以幫助我們簡化代碼，做到實(shí)時(shí)更新，不用再自己添加function去修改data。
首先看一下計(jì)算屬性的基本寫法(摘自官網(wǎng))
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
這樣我們在模版里這樣引入computed屬性就可以了，他的效果個(gè)data一樣
<div id="demo">{{ fullName }}</div>
這樣我們修改firstName或者lastName，fullName都會同步更新
這里我們主要不是講這個(gè),而是講如果把 firstName和lastName放在一個(gè)數(shù)組里
比如這樣[firstName ,lastName]
如果這時(shí)候修改數(shù)組中的一項(xiàng)會不會有相同的效果呢？
修改一下代碼
var vm = new Vue({
el: '#demo',
data: {
nameArray:['Foo' ,'Bar']
},
computed: {
fullName: function () {
return this.nameArray[0] + ' ' + this.nameArray[1]
}
}
})
methods: {
change () {
this.nameArray[0] = '123'
}
觸發(fā)change方法可見fullName并沒有變化。原因可能是vue沒有監(jiān)聽到數(shù)組 nameArray的長度變化。
此時(shí)我們可以采用splice讓數(shù)組的長度有個(gè)變化，這時(shí)候vue就可以監(jiān)聽到了
this.nameArray.splice(0, 1, '123')
或者使用vue的$set方法
this.$set(this.nameArray, 0, '123')
還有一點(diǎn)要注意，就是如果這個(gè)計(jì)算屬性沒有使用過，也就是說頁面中沒有引用，也沒有其他變量使用他，同樣不會觸發(fā)計(jì)算屬性。至少，來個(gè)console打印一下也行
以上這篇vue計(jì)算屬性無法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動 tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說可以用 vue-draggable-plus 這個(gè)庫來實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue從倉庫state中取不到數(shù)據(jù)的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue和小程序項(xiàng)目中使用iconfont的方法
這篇文章主要介紹了vue中和小程序中使用iconfont的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue3中vite的@路徑別名與path中resolve實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于vue3中vite的@路徑別名與path中resolve的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
淺談vue中document.getElementById()拿到的是原值的問題
這篇文章主要介紹了淺談vue中document.getElementById()拿到的是原值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue面試之new Vue的時(shí)候到底做了什么原理及vue加載流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
記錄一個(gè)van-list不斷onLoad加載的坑及解決
這篇文章主要介紹了記錄一個(gè)van-list不斷onLoad加載的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中一個(gè)組件調(diào)用其他組件的方法詳解(非父子組件)
vue中最常見子父組件產(chǎn)值,大家一定都很熟悉,最近項(xiàng)目中碰到非父組件中調(diào)用子組件方法的問題,這篇文章主要給大家介紹了關(guān)于Vue中一個(gè)組件調(diào)用其他組件的方法(非父子組件),需要的朋友可以參考下2022-10-10
vue-cli項(xiàng)目優(yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目優(yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue中關(guān)于重新渲染組件的方法及總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12