夜晚有明月，夢里有佳人
前言
最近在寫老師布置的vue項目，真的說實話，每天真就是在百度、google、bing等各個搜索引擎之間反復橫跳，不然就是掘金搜一搜、思否搜一搜，還有CSDN看一看。我的前端是吃百家飯長大的，每天不知道要遇到多少問題，然后基本上周圍所有的前端同學都被我問到了，基本上就是誰有空就拉誰來教我。
前端太多細節問題了，一旦遇到沒有接觸過問題，就會非常麻煩，如果有學習前端的后端小伙伴，我覺得最快熟悉前端的方式，就是整個項目寫。這可能是最快上手前端框架的方式了吧。
一、vue中修改數組對象下的數組里的某一個對象
我的對象結構如下：
sections: [
{
id: 0,
addInputBool: true,
generallnformationBool: false,
generallnformation: '',
updateGenerlInfoImgBool: false,
pullUpQusetionBool: true,
upQusetionBool: true,
downQuestionBool: false,
questions: [
{
id:'',
name:'',
isCheckbox:'',
answer:'',
conditions:[],
dropdownMultiSelections:[]
}
]
}
]
要實現的需求是通過數組下標，修改數組里某一個對象。
最開始我的想法就是將數值一個一個的賦值進數組，和寫Java代碼一樣的思維。
this.sections[index].question[id]=this.addQuestion
這里的index和id是我們點擊頁面修改傳過來的值，最后發現這樣一直報錯，不能夠實現修改。
后來查百度說：
問題：
根據數組的索引直接賦值沒法修改數組的中對象。
原因：
Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上
然后就查到了要使用this.$set來進行操作
解決：
// 數組：第一個參數是要修改的數組, 第二個值是修改的下標或字段,第三個是要修改成什么值
this.$set(sections[index].question,id,{
id:'123',
name:'寧在春',
isCheckbox:true,
answer:'測試集',
conditions:[1,2,3],
dropdownMultiSelections:[a,b,c]
});
或者
// 對象：第一個參數是要修改的對象, 第二個值是修改屬性字段,第三個是要修改成什么值
Vue.set(sections[index].question,id,{ id:'123',
name:'寧在春',
isCheckbox:true,
answer:'測試集',
conditions:[1,2,3],
dropdownMultiSelections:[a,b,c]})
看到有這個this.$set方法，就想去了解了解，看看它還有什么應用場景，方便下次有需要的時候，能夠直接用上。
二、this.$set
2.1、this.$set能夠實現什么功能
官方解釋：向響應式對象中添加一個屬性，並確保這個新屬性同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新屬性，因為 Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hello，ningzaichun'）
簡單說即是：當你發現你給對象加了一個屬性，在控制台能打印出來，但是卻沒有更新到視圖上時，也許這個時候就需要用到this.$set（）這個方法了
2.2、如何使用 this.$set
Vue中this.$set的用法
// 數組：第一個參數是要修改的數組, 第二個值是修改的下標或字段,第三個是要修改成什么值
// 對象：第一個參數是要修改的對象, 第二個值是修改屬性字段,第三個是要修改成什么值
Vue.set( target, propertyName/index, value )
參數
{Object | Array} target
{string | number} propertyName/index
{any} value
小小案例：
<template>
<div class="page" id="app">
<button @click="add">設置</button>
<ol>
<li v-for="(item, index) in arr" :key="index">{{ item.name }}</li>
</ol>
</div>
</template>
<script>
export default {
data () {
return {
arr: [
{ name: '寧在春', age: 21 },
{ name: '北桑夏', age: 21 }
]
}
},
mounted () {
this.arr[2] = { name: '青冬栗', age: 23 } // 數組的值發生了變化 但視圖沒有更改
console.log(this.arr)
},
methods: {
add () {
this.$set(this.arr, 2, { name: '青冬栗', age: 23 }) // $set 觸發視圖更改
}
}
}
</script>
target: 要更改的數據源（可以是一個對象或者數組）
key 要更改的具體數據 （索引）
value 重新賦的值
在vue的生命周期鈎子函數mounted中，我們手動的在數組加入了一個值，但是並不會直接在頁面視圖進行更新。
初始化的頁面是這樣的。
但是在控制台其實是已經打印出來的拉
但是如果我們點擊按鈕的設置，視圖就會立馬發生改變
這就是this.$set一個妙用之處。
2.3、this.$set 應用場景
1、在我們使用vue進行開發中，可能會碰到一種情況，當已經生成vue實例后，再次去給數據賦值或者添加數據，並不能同步更新到數據上面去。
2、另外就是像我這種，利用this.$set進行數據的更新
自言自語
紙上得來終覺淺，絕知此事要躬行。大家好，我是博主
寧在春：主頁一名喜歡文藝卻踏上編程這條道路的小青年。
希望：
我們，待別日相見時，都已有所成。