Vue中v-if失效问题（数据更新，页面没有发生变化）_程序员啊楠的博客

问题：console的时候数据一直是有更新的，但是页面始终没有变化

自己尝试了this.$nextTick( ()=>{ .... } ),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，结果没有实现；

再次尝试了this.$set(this.items, "itemType", selectItem.dictValue);结果还是没有实现，同样的数据一直在变化，页面始终没有变化。

参考网上其他方法：this.$forceUpdate()方法（强制刷新）、this.reload（）.......

因为每个表格的列宽、高都一样，改变太小，导致vue无法识别，进而没有因为数据的变化去更改页面。

给每个列加一个唯一的标识：key="..."

<ux-excel-editor v-model="items.vipPointRedemptionTypeDetailList" no-paging
      :autoAddRow="(row) => handleAddProductRow(row)" @removeRows="(rows) => handleRemoveProductRow(rows)">
      <ux-excel-column :label="l('Product')" type="custom" field="productName" @customclick="productCustomClick"
        :change="productChange" v-if="items.itemType==0" :key="0">
      </ux-excel-column>
      <ux-excel-column :label="l('Brand')" field="brandName" type="custom" @customclick="brandCustomClick"
        :change="brandChange" v-if="items.itemType==1" :key="1">
      </ux-excel-column>
      <ux-excel-column :label="l('Category')" field="categoryName" type="custom" @customclick="categoryCustomClick"
        :change="categoryChange" v-if="items.itemType==2" :key="2">
      </ux-excel-column>
      <ux-excel-column :label="l('ItemQualifier')" field="itemQualifierName" type="custom"
        @customclick="qualifierCustomClick" :change="qualifierChange" v-if="items.itemType==3" :key="3">
      </ux-excel-column>
    </ux-excel-editor>

    setItemType(selectItem, rowData) {
      this.$set(this.items, "itemType", selectItem.dictValue);
      var exist = this.item.vipPointRedemptionTypeList.filter(
        (t) => t.itemType == selectItem.dictValue
      if (exist.length > 1) {
        this.$notify.error(this.l("itemTypeExist", selectItem.code));
        rowData.itemType = null;
        rowData.itemTypeName = "";
      } else {
        rowData.itemType = selectItem.dictValue;
        rowData.itemTypeName = selectItem.dictLabel;
原文链接：https://blog.csdn.net/weixin_42288182/article/details/108095456?spm=1001.2014.3001.5501
                    Vue数据更新，页面没有更新目前做的业务是根据上面表格选中项，动态变化下面对应的表格，效果图如下问题：console的时候数据一直是有更新的，但是页面始终没有变化自己尝试了this.$nextTick( ()=&gt;{ .... } ),nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，结果没有实现；再次尝试了this.$set(this.items,"itemType",selectItem.dictVa..
//在所写的事件函数中最底部添加下面这句话就解决了
this.$forceUpdate();
//因为数据层次太多，render函数没有自动更新，需手动强制刷新。添加this.$forceUpdate();进行强制渲染，效果实现。
打印出数据发生改变，但是视图没有变化，下拉框没有显示出来
<div class="select_div" @click.stop="foucusDiv(index)">
   {{item.platformType}}
   <div class="ul_list" @click="foucusDiv(index)" v-if="item.isShow" :ref="`list${index}`"&g
<template>
 	<el-radio v-model="radio" label="1" >A按钮</el-radio>
 	<el-radio v-model="radio" label="2" >B按钮</el-radio>
 	<div v-if=
				在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。
可以在根元素添加v-cloak来解决，并且设置它的样式即可。
代码只是示例，还需要自己修改测试。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<style> /* 在引入的css文件中写入这个*/
[v-cloak]
display: none;
</style>
</head>
<!-- 添加这个v-cloak -->
<div id='ap