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