vue修改对象的属性值后页面不重新渲染的实例

最近项目在使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：

HTML页面如下：

<template v-for="item in tableData">
    <div :class="{'redBorder':item.red}">
    <div>{{ item.name}}</div>
    <div>
     <el-button size="mini" @click="clickBtn(item.id)" type="info">编辑</el-button>
     <p class="el-icon-error" v-show="item.tip"></p>
    </div>
    </div>
</template>

js部分如下：

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },

  methods: {
 clickBtn(id){
 this.tableData[id].red=true;
 this.tableData[id].tip=true;
 }
 }
}
</script>

绑定的class是加一个红色的边框，如下：

.redBorder{
 border:1px solid #f00;
}

在项目中点击button后不出现红色边框和提示错误框，打开debugger查看，发现运行到了这里却没有执行，tableData中的值并没有改变，这个方法在以前使用时会起作用，可能是这次的项目比较复杂引起的，具体原因不明。

后通过查找资料修改为使用$set来设定修改值，js如下：

this.$set(this.tableData[id],"red",true);

但是依然没有起作用，打开debugger发现tableData的值修改成功，没有渲染到页面上，查找的资料也是比较凌乱，并不能解决问题，后请教大神，才知道是数据层次太多，没有触发render函数进行自动更新，需手动调用，调用方式如下:

this.$forceUpdate();

js完整代码如下：

<script>
 export default {
  data() {
  return {
   tableData:[{id:0,name:"lili",red:false,tip:false}]
  }
  },

  methods: {
 clickBtn(id){
 this.$forceUpdate();
 this.$set(this.tableData[id],"red",true);
 this.$set(this.tableData[id],"tip",true);
 }}}
</script>

以上是我解决问题的全过程，有不对的地方请指教。

这篇vue修改对象的属性值后页面不重新渲染的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue之debounce属性被移除及处理详解

    vue 2.0 debounce已经被移除 参考文档: https://cn.vuejs.org/v2/guide/migration.html#替换-debounce-过滤器 https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed 完整代码: <!DOCTYPE html> <html lang="en"> <head> <m

  • 解决vue动态为数据添加新属性遇到的问题

    vue为数据添加属性时遇到的坑,通过self.book[i].['cur']=false;动态为数据添加属性时,数据变化了,但是视图没有发生更新. 具体原因不明白.... 解决方法:通过set来添加属性this.set来添加属性this.set(self.book[i],'cur',false); 这样子来设置,就没问题了 以上这篇解决vue动态为数据添加新属性遇到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue v2.4中新增的$attrs及$listeners属性使用教程

    Vue v2.4中新增的$attrs及$listeners属性使用教程

    前言 多级组件嵌套需要传递数据时,通常使用的方法是通过vuex.如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀.Vue 2.4 版本提供了另一种方法,使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用.之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰. 首先分析以下应用场景: A 组件与 B

  • 在Vue组件上动态添加和删除属性方法

    如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法

  • vue修改对象的属性值后页面不重新渲染的实例

    最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: <template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> <div> <el-button size="mini" @click="

  • vue给对象添加属性没有响应式的问题及解决

    目录 vue给对象添加属性没有响应式 给已创建的vue添加响应式属性 怎么才能添加响应式的属性呢? 总结 vue给对象添加属性没有响应式 vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法. 但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题. 在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • Java 用反射设置对象的属性值实例详解

    Java 用反射设置对象的属性值实例详解 /** * 用反射设置对象的属性值 * @param obj 需要設置值的對象 * @param fieldName 需要設置值的屬性 * @param value 需要设置的值 * @return 设置值后的对象 */ private Object invoke(Object obj, String fieldName, Object value) { String firstWord = fieldName.substring(0, 1).toUpp

  • Python使用内置函数setattr设置对象的属性值

    英文文档: setattr(object, name, value) This is the counterpart of getattr(). The arguments are an object, a string and an arbitrary value. The string may name an existing attribute or a new attribute. The function assigns the value to the attribute, prov

  • JS实现查找数组中对象的属性值是否存在示例

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var studentsArray = [ { "

  • Python通过getattr函数获取对象的属性值

    英文文档: getattr(object, name[, default]) Return the value of the named attribute of object. name must be a string. If the string is the name of one of the object's attributes, the result is the value of that attribute. For example, getattr(x, 'foobar')

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • vue数据对象length属性未定义问题

    vue数据对象length属性未定义问题

    目录 数据对象length属性未定义 问题 解决 vue2.x中数组length属性报错 原因 解决方案 数据对象length属性未定义 问题 通过axios得到接口数据,但发现该数据length属性在打印的时候undefined. this.axios.get("/xxx/xxx/xxx/xxxx/process/status?docId=" + this.docId).then((response) => {   if (response.data.code === 0) {

  • Java反射如何有效的修改final属性值详解

    前言 以前写过一篇 Java 反射修改 final 属性值,本文将在这里重新温习一下Java反射如何有效的修改final属性值,下面话不多说了,来一起看看详细的介绍: 假设有个类 class Person { public final String name = "Mike"; } 这里声明 name 为非静态的属性只是为了说明反射修改 final 属性无关乎静态不静态,静态只是表现在它是一个类属性,在一个类加载器空间只会有一份拷贝,仅此而已. 创建一个通用方法进行反射修改属性值 pu

随机推荐