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

vue为数据添加属性时遇到的坑，通过self.book[i].[‘cur']=false;动态为数据添加属性时，数据变化了，但是视图没有发生更新。

具体原因不明白。。。。

解决方法：通过set来添加属性this.set来添加属性this.set(self.book[i],'cur',false);

这样子来设置，就没问题了

以上这篇解决vue动态为数据添加新属性遇到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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 v2.4中新增的$attrs及$listeners属性使用教程

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

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

  • 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组件上动态添加和删除属性方法

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

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

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

  • vue中向data添加新属性的三种方式小结

    vue中向data添加新属性的三种方式小结

    目录 向data添加新属性的三种方式 原理分析 三种方式 vue组件 data等属性介绍 向data添加新属性的三种方式 原理分析 首先在了解这三种方式之前,我觉的有必要说一下,为啥不能直接手动给data中的对象添加属性呢? 下面咱们一块分析下: vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式:     const obj = {};         let val = 'kk'         Object.defineProperty(obj,'na

  • 解决vue动态下拉菜单 有数据未反应的问题

    问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误 jsp 下拉菜单 <select name="plantModelParentId" v-model="vueObj.plantModelParentId" @change="selectChange"> <option value=""></option> <option v-fo

  • 解决Vue动态加载本地图片问题

    最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa

  • 解决Vue 给mapState中定义的属性赋值报错的问题

    1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错 如: // 假如path = '@/views/user' const com = () => import(path) // 这样会报错哦 const com2 = (

  • vue如何给数组添加新对象并赋值

    目录 给数组添加新对象并赋值 方法一 方法二 数组赋值踩过的坑及解决 给数组添加新对象并赋值 方法一 适用于数组就只有一组 listData: [{name:"张三",age:18}], //直接添加对象 listData.sex="男" 方法二 适用于数组中有多组信息 listData:[], list:[{"张三","李四"}] //比如想把另外一个数组中编列出来的值加入到这个数组中    for (let index =

  • Vue 动态生成数据字段的实例

    目录 动态生成数据字段实例 1.父组件定义data里面的数据字段 2.子组件接收数据 3.因为获取数据是异步操作 4.计算属性计算两个变量是否均完成 5.子组件完整代码 表单动态生成字段 动态生成数据字段实例 1.父组件定义data里面的数据字段 异步请求获取数据(一种配置数据,一种实际数据) data () {   return {     config: [],     list: []   }; } 2.子组件接收数据 props: {   config: Array,   list: A

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • Vue动态获取数据后控件不可编辑问题

    Vue动态获取数据后控件不可编辑问题

    目录 功能介绍 实现过程 1.做判断 2.在控件中使用editNotavailable 3.定义editNotavailable的初始状态 老规矩:先走波流程! 看实现效果,更好根据大家的问题相对应的解决自己的问题. 功能介绍 由动图可以看到,当我点击添加试题时,因为要添加些数据,跳转过去的界面必须是可以使用的.再当我点击编辑,携带过去的数据是不能更改的,只更改下方题干部分. 具体如何实现控件获得数据后不可更改呢?主要是用到判断,可以看到这里我只给input和select组件设置了不可用,但他们

随机推荐