快捷導(dǎo)航

vue2更改data里的變量不生效時(shí),深層更改data里的變量問題

更新時(shí)間：2024年03月01日 09:01:28 作者：美酒沒故事°

這篇文章主要介紹了vue2更改data里的變量不生效時(shí),深層更改data里的變量問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue2更改data里變量不生效,深層更改data里變量

如下圖，當(dāng)data里的數(shù)據(jù)多層嵌套

語法：

this.$set(位置,‘屬性',‘值');

示例：

this.$set(this.schoolBag[0].bagData[2],'value','666');

解釋：

設(shè)置第一個(gè)schoolBag數(shù)組里的第三個(gè)bagData里的value為666

vue 異步修改data中的值不生效

在做vue項(xiàng)目的時(shí)候，由于用到了echart社區(qū)的官方圖表，就小小的封裝了一下，封裝過后只需要傳入一個(gè)數(shù)組數(shù)據(jù)就可以渲染出圖表了，由于之前沒有數(shù)據(jù)，我就在本地測(cè)試的時(shí)候傳給了他一些默認(rèn)數(shù)據(jù)，但是到后來對(duì)接接口的時(shí)候，這是數(shù)據(jù)是從后臺(tái)哪里獲取的，所以我需要從vue data中拿數(shù)據(jù)，然后傳到函數(shù)中，問題就是出在這一步，你死活無法拿到vue data中更新后的值，你說氣人不

這時(shí)會(huì)有人說，Vue是通過響應(yīng)式系統(tǒng)修改，響應(yīng)式系統(tǒng)會(huì)在初始化時(shí)對(duì)data進(jìn)行監(jiān)聽，如果要修改data中的值，應(yīng)該使用Vue提供的修改方法

this.$set(this.data, 'name', 'new value')

數(shù)組的話還可以這樣修改

this.arr.splice(0,1,[])

不過你要知道該方法觸發(fā)的時(shí)機(jī)，數(shù)據(jù)如果沒有正確地綁定到模板中，那么即使使用了$set方法修改了data值，視圖也不會(huì)發(fā)生變化。

你可以通過在模板中使用{{}}或v-bind綁定數(shù)據(jù)，這樣以確保數(shù)據(jù)能正確地渲染到視圖中。

才能準(zhǔn)確地觸發(fā)更新

相反如果數(shù)據(jù)沒有進(jìn)行綁定，你會(huì)發(fā)現(xiàn)不管你在哪里訪問data,拿到的永遠(yuǎn)是之前的值

具體可以看下面這張圖：

其實(shí)呢要解決這個(gè)問題也簡(jiǎn)單，你只需要在返回一個(gè)promise就可以了

下面是一些具體實(shí)現(xiàn)方法：

<script>
  export default {
    data() {
      return {
        arr:[
          [0,1,2,3],
          [1,2,3,4],
          [2,3,4,5],
        ]
      }
    },
      methods: {
        asyncfunc(){
           return new Promise((resolve, reject) => { 
              setTimeout(() => {
                this.$set(this.arr,0,[0,25])
                resolve()
              }, 5000);
            })
        }
      },
      mounted () {
        this.asyncfunc().then((result) => {
          console.log(this.arr[0],'值發(fā)生改變')
        })
      },
  }
</script>

這樣你就可以拿到data中更新后的值啦！??！