欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決

 更新時(shí)間:2021年09月09日 10:05:06   作者:試著奔跑的菜鳥(niǎo)  
這篇文章主要介紹了Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

項(xiàng)目場(chǎng)景:

在頁(yè)面顯示上有一個(gè)<ul>標(biāo)簽,我們需要?jiǎng)討B(tài)進(jìn)行列表數(shù)據(jù)的展示,而由于我們的頁(yè)面上除了列表值,還有其他的值要進(jìn)行展示,因此列表數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)是某個(gè)對(duì)象下面的數(shù)組,在動(dòng)態(tài)修改數(shù)據(jù)后發(fā)現(xiàn)沒(méi)有進(jìn)行自動(dòng)渲染。

問(wèn)題描述:

在點(diǎn)擊按鈕“click me!”時(shí)雖然數(shù)據(jù)有變化且在控制臺(tái)進(jìn)行了輸出,但是列表數(shù)據(jù)并沒(méi)有發(fā)生渲染。
代碼如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <button @click="pushDataToDataList">click me!</button>
  <ul>
    <li v-for="(item, i) in form.dataList" :key="item">
      {{ i + ":" + item }}
    </li>
  </ul>
</div>
<script>
  let app = new Vue({
    data: function() {
      return {
        form: {}
      }
    },
    methods: {
      pushDataToDataList() {
        if (this.form.dataList == null) {
          this.form.dataList = []
        }
        this.form.dataList.push("abc" + this.form.dataList.length)
        console.log(this.form.dataList)
      }
  }
  }).$mount('#app')
</script>

chrome的控制臺(tái)顯示

原因分析:

在查閱了官方文檔后我們發(fā)現(xiàn)下面這段話

由于 JavaScript 的限制,Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。盡管如此我們還是有一些辦法來(lái)回避這些限制并保證它們的響應(yīng)性。

  1. 對(duì)于對(duì)象:Vue 無(wú)法檢測(cè) property 的添加或移除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
  2. 對(duì)于數(shù)組:Vue 不能檢測(cè)以下數(shù)組的變動(dòng):
  • 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí),例如:vm.items[indexOfItem] = newValue
  • 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí),例如:vm.items.length = newLength

原因到這里就明了了,我們的數(shù)據(jù)沒(méi)有進(jìn)行渲染是因?yàn)樵谝婚_(kāi)始,data下的form中就沒(méi)有dataList這個(gè)屬性,因此在后續(xù)即使該值產(chǎn)生了變化,Vue也就無(wú)法檢測(cè)到它的改變。而且不僅僅是對(duì)數(shù)組,即使是js對(duì)象也是一樣的。除此之外,直接按下標(biāo)修改數(shù)組的元素,也不會(huì)觸發(fā)視圖渲染。
會(huì)觸發(fā)數(shù)組渲染的有以下數(shù)組方法:

  • push(element) // 在數(shù)組末尾添加元素
  • pop() // 刪除數(shù)組最后一個(gè)元素并將其返回
  • shift() // 刪除數(shù)組第一個(gè)元素并將其返回
  • unshift(ele1, ele2, …, eleN) // 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素,并返回新的長(zhǎng)度
  • splice(start, deleteCount?, …item) // 刪除數(shù)組中的元素并在該元素所在位置替換為新元素
  • sort() // 對(duì)數(shù)組進(jìn)行排序,會(huì)修改數(shù)組元素的位置
  • reverse() // 倒轉(zhuǎn)數(shù)組元素,會(huì)修改數(shù)組元素的位置

解決方案:

1.在data下的form對(duì)象中,設(shè)置dataList屬性。由于前端在對(duì)數(shù)據(jù)進(jìn)行處理時(shí)就知道代碼的結(jié)構(gòu)是什么,提前設(shè)置好了也便于后續(xù)的開(kāi)發(fā)理解。建議使用

data: function() {
  return {
    form: {
      dataList: null
    }
  }
}

2.使用this.$set()方法

pushDataToDataList() {
  if (this.form.dataList == null) {
    // 先在form下設(shè)置下dataList屬性
    this.$set(this.form, 'dataList', [])
  }
  this.form.dataList.push("abc" + this.form.dataList.length)
  console.log(this.form.dataList)
}

參考鏈接

Vue檢測(cè)數(shù)據(jù)變化的注意事項(xiàng)

到此這篇關(guān)于Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決的文章就介紹到這了,更多相關(guān)Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法

    Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法

    開(kāi)發(fā)任務(wù)中有這樣一個(gè)需求,下拉框中需要展示超過(guò)5000條數(shù)據(jù),甚至更多,這數(shù)據(jù)量直接整個(gè)頁(yè)面卡死了,就想到在下拉框中加分頁(yè),下面小編通過(guò)實(shí)例代碼介紹下Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn),感興趣的朋友一起看看吧
    2022-11-11
  • vscode中開(kāi)發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟

    vscode中開(kāi)發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟

    VSCode作為一個(gè)非常強(qiáng)大的代碼編輯器,可以集成眾多的插件和工具來(lái)優(yōu)化開(kāi)發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode中開(kāi)發(fā)運(yùn)行uniapp項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下
    2023-07-07
  • vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)

    vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)

    本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • 關(guān)于vue中對(duì)window.openner的使用指南

    關(guān)于vue中對(duì)window.openner的使用指南

    opener屬性是一個(gè)可讀可寫(xiě)的屬性,可返回對(duì)創(chuàng)建該窗口的Window對(duì)象的引用,下面這篇文章主要給大家介紹了關(guān)于vue中對(duì)window.openner使用的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • Vue 搭建Vuex環(huán)境詳解

    Vue 搭建Vuex環(huán)境詳解

    這篇文章主要為大家介紹了Vue搭建Vuex環(huán)境,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • 深入解讀VUE中的異步渲染的實(shí)現(xiàn)

    深入解讀VUE中的異步渲染的實(shí)現(xiàn)

    這篇文章主要介紹了深入解讀VUE中的異步渲染的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • Vue3的ts報(bào)錯(cuò):類(lèi)型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法

    Vue3的ts報(bào)錯(cuò):類(lèi)型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法

    這篇文章主要給大家介紹了關(guān)于Vue3的ts報(bào)錯(cuò):類(lèi)型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項(xiàng)目中遇到的一個(gè)問(wèn)題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下
    2023-08-08
  • Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)

    Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)

    這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue+Vant實(shí)現(xiàn)下拉加載功能

    Vue+Vant實(shí)現(xiàn)下拉加載功能

    為了像微信一樣方便地加載更多歷史消息,這篇文章將為大家介紹我們?nèi)绾问褂胿ant組件來(lái)實(shí)現(xiàn)下拉加載功能,感興趣的小伙伴可以跟隨小編一起了解一下
    2023-06-06
  • Vue表單預(yù)校驗(yàn) validate方法不生效問(wèn)題

    Vue表單預(yù)校驗(yàn) validate方法不生效問(wèn)題

    這篇文章主要介紹了Vue表單預(yù)校驗(yàn) validate方法不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04

最新評(píng)論