vue中,怎么給data對象添加新的屬性?(尼瑪這面試題居然讓我給碰上了。。。。)


Vue中給data中的對象屬性添加一個新的屬性時會發生什么,如何解決?

示例:

<template> <div> <ul> <li v-for="value in obj" :key="value"> {{value}} </li> </ul> <button @click="addObjB">添加obj.b</button> </div> </template> <script> export default{ data () { return { obj: { a: 'obj.a' } } }, methods: { addObjB () { this.obj.b = 'obj.b' console.log(this.obj) } } } </script> <style></style> 

點擊button會發現, obj.b 已經成功添加,但是視圖並未刷新:

 

 
原因在於在Vue實例創建時, obj.b 並未聲明,因此就沒有被Vue轉換為響應式的屬性,自然就不會觸發視圖的更新,這時就需要使用Vue的全局api—— $set():
addObjB () { // this.obj.b = 'obj.b' this.$set(this.obj, 'b', 'obj.b') console.log(this.obj) } 

$set() 方法相當於手動的去把 obj.b 處理成一個響應式的屬性,此時視圖也會跟着改變了:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM