iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0

本章節會介紹Vue所配置的函數Vue.set()
其可以達到從外部像Vue.data新增對象

初始數據

<body>
    <div id="root">
        <h3>{{person.name}}</h3>
        <h3>{{person.age}}</h3>
    </div>
    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                person : {
                    name : 'Adam'
                }
            }
        })
    </script>
</body>

錯誤示範

若要新增一筆新的資料時候使用 → vm._data.age = 24
頁面不會因此使用到age資料
其單單只是在 Vue實例對象中
暴力的直接放入一個 age = 24 的對象而已
跟上一章節提到陣列的處理有幾分相似
https://ithelp.ithome.com.tw/upload/images/20230913/20160193XXb3c3hGGo.png

使用這樣的方式新增資料會造成問題
資料雖然新增了,但其實新增的資料並未配置,vue給予的get(),set()配置項
vue不會感受到資料的異動

使用Vue.set()

Vue.set(target,key,val)的參數介紹 :

  1. target : 要新增新數據的目標位置
  2. key : 新增的 key名稱
  3. value : 新增的 value
  4. 範例(完整寫法) : Vue.set(vm._data.person,‘age’, 24)

使用Vue.set()可以達到外部新增對象的需求
其配置也跟初始數據是一樣的

https://ithelp.ithome.com.tw/upload/images/20230913/20160193QNmDbcdEfM.png

可以看到age擁有Vue可以使用的get(),set()

簡寫

Vue.set(vm.person,‘age’,24)
若在vm配置的methods或是compute可以寫this.person就好
(_data可審略不寫)

使用注意

在vue中會希望data內有起碼兩層結構
根數據基本是指接受對象,而不是value值
所以在使用Vue.set方法時,是不能直接在vm._data中新增新的資料

將程式碼做修改
age已經變成根數據

<body>
    <div id="root">
        <h3>{{person.name}}</h3>
        <h3>{{age}}</h3>
    </div>

    <script>
        var vm = new Vue({
            el : "#root",
            data : {
                person : {
                    name : 'Adam'
                }
            }
        })
    </script>
</body>

https://ithelp.ithome.com.tw/upload/images/20230913/20160193ocFW5JdZVu.png

可以看到在根數據有必要在初始化的時候配置好
在開始使用set的方法後頁面也沒有呈現age的數據
並且也會拋出set方法的使用不當

https://ithelp.ithome.com.tw/upload/images/20230913/20160193JIIGY6Zeo7.png

打開Vue實例也可以觀察到age並未set進Vue裡

Vue官網建議

https://ithelp.ithome.com.tw/upload/images/20230913/20160193GGDdeQjjeZ.png
以上述所提,Vue的使用上根數據的配置是有一定的規則


以上就是Vue.set()的介紹


上一篇
2023鐵人賽_Vue2基本使用規則(Day12)-陣列
下一篇
2023鐵人賽_Vue2基本使用規則(Day14)-過濾器
系列文
Vue2 初步認識以及基本使用規則 && 了解 Vue2 的基本原理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言