Vue動態(tài)添加屬性到data的實現(xiàn)
更新時間：2022年08月05日 11:21:07 作者：飯啊飯°
在vue中請求接口中，一個請求方法可能對應后臺兩個請求接口，所以請求參數(shù)就會有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動態(tài)添加參數(shù)屬性
一、場景例子
<body>
<div id="app">
<p v-for="(value,key) in item" :key="key">
{{value}}
</p>
<button @click="addProperty">動態(tài)添加新屬性</button>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
item:{
oldProperty:"舊屬性"
}
},
methods: {
addProperty(){
this.item.newProperty = "新屬性";
console.log(this.item);
}
},
})
</script>效果：點擊按鈕后，輸出的結(jié)果中有新添加的新屬性，但是頁面沒有顯示新屬性。
二、原理分析
vue2使用Object.defineProperty實現(xiàn)數(shù)據(jù)響應式；
const obj = {}
Object.defineProperty(obj, 'foo', {
get() {
console.log(`get foo:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
console.log(`set foo:${newVal}`);
val = newVal
}
}
})
}- 當訪問foo屬性，或者設(shè)置foo值的時候都能觸發(fā)setter與getter；
- 但是為obj添加新屬性的時候，卻無法觸發(fā)事件屬性的攔截
bj.bar = '新屬性'
原因是一開始obj的foo屬性被設(shè)成了響應式數(shù)據(jù)，而bar是后面新增的屬性，并沒有通過Object.defineProperty設(shè)置成響應式數(shù)據(jù)
三、解決方案
有三種解決方案：
- Vue.set()
- Object.assign()
- $forcecUpdated()
常用的就是Vue.set()，語法為：Vue.set( target, propertyName/index, value )
<script>
new Vue({
el:'#app',
data:{
item:{
oldProperty:"舊屬性"
}
},
methods: {
addProperty(){
Vue.set(this.item,"newProperty","新屬性")
console.log(this.item);
}
},
})
</script>
到此這篇關(guān)于Vue動態(tài)添加屬性到data的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue動態(tài)添加屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
大家都知道vue-router有兩種模式，hash模式和history模式，帶＃的則是hash模式。接下來給大家?guī)砹薞ue 去除路徑中的＃號的解決方法，感興趣的朋友一起看看吧2018-04-04
Mixin是面向?qū)ο蟪绦蛟O(shè)計語言中的類,提供了方法的實現(xiàn),其他類可以訪問mixin類的方法而不必成為其子類在Vue中,可以使用mixin來擴展組件的功能,本文給大家介紹了Vue中如何使用mixin擴展組件功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue SSR 即時編譯技術(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
今天小編就為大家分享一篇關(guān)于vue-router實現(xiàn)嵌套路由的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細介紹了vue車牌輸入組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
不過 Vue 本身含有非常豐富的功能，要用 Vue 搭建完整的應用，仍然需要了解大量 Vue 設(shè)計概念和操作技巧。這篇文章主要介紹了Vue.js 十五分鐘入門圖文教程,需要的朋友可以參考下2018-09-09
巧妙運用v-model實現(xiàn)父子組件傳值的方法示例
這篇文章主要介紹了巧妙運用v-model實現(xiàn)父子組件傳值的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04 
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的留言板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10