44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效

前言

我们经常会碰到一些模型和视图不同步的问题

通常意义上主要的问题为列表的某响应式数据更新着更新着后面就变成非响应式对象了, 然后就造成了数据一直在更新, 但是视图的渲染后面就未渲染了, 这是一个由于模型上的问题导致的数据的不在响应式更新

又或者是因为使用了相关 vue 未能够检测到的 api 来更新对象, 数组的元素, 然后导致的数据的不同步, 数据更新了但是视图未更新

然后我们这里来看一下另外的一个由于vue这边视图更新造成的一个数据不同步的情况, 这里的情况是模型里面增加了一条数据, 但是页面上没有渲染出来

这个问题还是很有意思, 是和 vue 这边渲染视图元素有一些关系

核心比较关键的元素是 el-dialog, 然后其中有一个 appendToBody 的属性

vue 模型视图不同步同类型题材的文章可以参见

el-tree defaultCheckedKeys配置和树上面选中节点不同步问题

特定的操作之后响应式对象不"响应"了(一)

特定的操作之后响应式对象不"响应"了(二)

直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了

测试用例

<template>
  <div class="testParent">

    <div v-for="dayPlan in weekPlan" style="display: flex;" >
      <el-tag type="warning">{{dayPlan.name}}</el-tag>
      <div class="block" v-for="biz in dayPlan.children" style="display: inline; float:left;">
        <el-tag type="warning">{{biz.time}}</el-tag>
        <el-input v-model="biz.biz" :name="biz.biz" ></el-input>
      </div>

      <el-dialog :visible.sync="visible" v-if="dialogVisible" width="480px" :show-close="true" :modal="false"
                 :append-to-body="true" >
        <span>是否退出登录?</span>
      </el-dialog>
    </div>

    <el-button style="position: absolute; top: 100px; left : 1500px; " @click="handleClick" > click </el-button>

  </div>

</template>

<script>

  export default {
    name: "HelloElInputUpdate",
    data() {
      return {
        visible: false,
        dialogVisible: true,
        weekPlan: [
          {
            id: "01", name: "monday",
            children: [
              {
                time: "morning",
                biz: "chinese"
              }, {
                time: "afternoon",
                biz: "english"
              }
            ]
          },
          {
            id: "02", name: "tuesday",
            children: [
              {
                time: "morning",
                biz: "math"
              }, {
                time: "afternoon",
                biz: "english"
              }
            ]
          },
          {
            id: "03", name: "wednesday",
            children: [
              {
                time: "morning",
                biz: "math"
              }, {
                time: "afternoon",
                biz: "english"
              }
            ]
          }
        ],
      }
    },
    computed: {},
    mounted() {
      let _this = this
      setTimeout(function() {
        _this.weekPlan[2].children[0].biz = "updated"
        console.log(" updated ")
      }, 5000)

      setTimeout(function() {
        _this.weekPlan[1].children.push({time: "night", biz: "tv"})
        console.log(" newly created ")
      }, 6000)

    },
    created() {
    },
    methods: {
      handleClick() {
        this.visible = !this.visible
      }
    },
  }
</script>

<style>

</style>