快捷導(dǎo)航

Vue 數(shù)值改變頁(yè)面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題)

更新時(shí)間：2023年09月08日 12:23:48 作者：月下脆竹書閣

這篇文章主要介紹了Vue 數(shù)值改變頁(yè)面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

解決數(shù)據(jù)改變視圖不更新的問題

情況描述

值（List）修改后，打印值改變了，但頁(yè)面數(shù)據(jù)沒刷新

如何賦值： this.tableData[index] = { ...this.tableData[index], ...result }
想法：利用解構(gòu)賦值，修改對(duì)應(yīng)key的value值
例：this.tableData[index] = {id:1,name:jarry} result={id:2}

原因

解構(gòu)賦值如果所解構(gòu)的原對(duì)象是一維數(shù)組或?qū)ο?，其本質(zhì)就是對(duì)基本數(shù)據(jù)類型進(jìn)行等號(hào)賦值，那它就是深拷貝；
如果是多維數(shù)組或?qū)ο?，其本質(zhì)就是對(duì)引用類型數(shù)據(jù)進(jìn)項(xiàng)等號(hào)賦值，那它就是淺拷貝；
最終的結(jié)論就是：解構(gòu)賦值是淺拷貝（因?yàn)樗_實(shí)不能對(duì)多維數(shù)組或?qū)ο筮_(dá)到深拷貝的作用）；

解決方案

1.直接賦值

  Object.keys(result).forEach(item => {
     this.tableData[index][item] = result[item];
 })

2.$set

  Object.keys(result).forEach(item => {
    this.$set(this.tableData[index], item, result[item])
 })

3.重新賦值 JSON.parse(JSON.stringify(this.tableData))

 this.tableData[index] = { ...this.tableData[index], ...result };
  this.tableData = JSON.parse(JSON.stringify(this.tableData))

4.v-if&&this.$nextTick 重新渲染頁(yè)面

 <Table :columns="columns" :data="tableData"  v-if="isTable"></Table>

 this.$nextTick(()=>{
     this.isTable = true;
  })

當(dāng)表格數(shù)據(jù)改變，表格沒刷新時(shí)，并且使用了render

例如：如下是增加了表格可展開行，但是 展開行在重新賦值時(shí)并沒有更新頁(yè)面

在這里插入圖片描述

 columns: [
     {
       type: "expand",
       width: 30,
       align: "center",
       render: (h, params) => {
         return h(
           "div",
           {
             style: {
               padding: "5px 0 5px 30px",
               backgroundColor: "#fff",
             },
           },
           [
             h("Table", {
               props: {
                 border: true,
                 columns: this.columns1,
                 data: this.data[params.index].children || [],
                 tablekey: this.tablekey,
               },
             }),
           ]
         );
       },
     }
]

解決方案

添加 tablekey ，當(dāng)賦值以后， this.tablekey++

在這里插入圖片描述

this.data.forEach((item) => {
    if (item.id === id) {
      let result = res.result || [];
      item.children = result;
      this.submitBindData.ids = result.map((o) => o.id).join(",");
    }
  });
  ++this.tablekey;

到此這篇關(guān)于Vue 數(shù)值改變頁(yè)面沒有刷新的問題解決(解決數(shù)據(jù)改變視圖不更新的問題)的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)改變視圖不更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: