Vue动态添加对象类型的值,静默刷新.

最新推荐文章于 2024-05-18 17:11:58 发布

原创最新推荐文章于 2024-05-18 17:11:58 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #jquery

本文介绍了Vue.js的一个常见问题，即无法检测到新对象属性的添加导致页面不更新。文章通过两个解决方案进行演示：一是使用Vue的$set方法确保属性的添加能被响应式系统捕捉；二是利用v-if和$nextTick来强制重新渲染。作者指出，尽管$set是直接解决方法，但当属性数量庞大时，第二种方法更为通用且易于管理。

Vue的缺点.不能检测到新对象属性的添加和删除.

<template>
   <div>
    {{ obj }}
    <button @click='hand'>按钮</button>
   </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 1
      }
    }
  },
  methods: {
    hand() {
      this.obj.name2 = new Date()
    }
  }
}
</script>

当事件触发的时候页面渲染的obj是不会有变化的.

1.方法$set

<template>
   <div>
    {{ obj }}
    <button @click='hand'>按钮</button>
   </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 1
      }
    }
  },
  methods: {
    hand() {
      //  this.obj.name2 = new Date()  !~当使用$set方法的时候.就不要使用原始方法.会出现读取第一步.已经存在而不继续读取
      //  this.$set 有三个参数.分别是.
      //  this.$set(当前所需要添加对象所在的具体地方,'当前添加对象的名',值)

          this.$set(this.obj, 'name2', new Date())
    }
  }
}
</script>

2.方法2.

通过设置v-if='xxx' 初始默认为true, 在执行事件的时候隐藏部分状态,

再利用this.$nextTick()等待异步任务完全执行完毕以后重现渲染部分页面.

<template>
  <div>
    <div v-if="show">{{ obj }}</div>
    <button @click="han">按钮</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      show: true,
      obj: {
        name: 1
      }
    }
  },
  methods: {
    han() {
      this.show = false
      this.obj.name2 = new Date()
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>

<style>

</style>

注意点:

一般通用第二种方法,第一种方法虽然可以实现.但是如果属性量过大.那么操作起来太困难