Vue不能检测的数组变化 对象变化
数组:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue
相同的效果,同时也将触发状态更新:
// Vue.set |
// Array.prototype.splice |
你也可以使用 vm.$set
实例方法,该方法是全局方法 Vue.set
的一个别名:
vm.$set(vm.items, indexOfItem, newValue) |
为了解决第二类问题,你可以使用 splice
:
vm.items.splice(newLength) |
对象:
Vue 不能检测对象属性的添加或删除:
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value)
方法向嵌套对象添加响应式属性。例如,对于:
var vm = new Vue({ |
你可以添加一个新的 age
属性到嵌套的 userProfile
对象:
Vue.set(vm.userProfile, 'age', 27) |
你还可以使用 vm.$set
实例方法,它只是全局 Vue.set
的别名:
vm.$set(vm.userProfile, 'age', 27) |
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign()
或 _.extend()
。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:
Object.assign(vm.userProfile, { |
你应该这样做:
vm.userProfile = Object.assign({}, vm.userProfile, { |
Vue不能检测的数组变化 对象变化的更多相关文章
- 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大
仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...
- vue的watcher 关于数组和对象
数组 不能被监听到的情况 1.直接下标赋值(但对象直接修改原有属性值可以渲染视图,虽然也监听不到) 2.修改数组length 解决方法: this.$set(this.arr,index,val) p ...
- vue prop不同数据类型(数组,对象..)设置默认值
vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array, Function, Object ...
- 从vue渲染想到的数组方法
<div id="app"> <ul> <li v-for='item in goods'>{{item}}</li> </u ...
- Vue中无法检测到数组的变动
本周在写项目中遇到修改数组中的值时,视图无变化问题.在查阅Vue官方文档后了解到,由于由JavaScript 的限制,Vue 不能检测以下数组的变动: 当利用索引直接设置一个数组项时,例如:vm.it ...
- Vue方法中修改数组某一项元素而不能响应式更新
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
- vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
- vue 不能检测数组长度 值变化原因解析
1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...
随机推荐
- BZOJ 3339 线段树
思路: 考虑离线处理 显然 l固定时 r越大 ans越大 那我们不妨按照l从小到大排序 l->l+1的时候 l到next[l]这段区间都跟a[l]取min就好了 搞颗线段树维护一下 //By S ...
- mybatis的sql中使用$会出现sql注入示例
mybatis的sql中使用$会出现sql注入示例: 模拟简单登录场景: 页面代码: function login(){ //sql注入 var user = { username : "' ...
- C# 导出excel的压缩包到浏览器页面
需求背景:TCX_1710项目产品质量导出功能,客户希望每个总成导出到一个Excel表中 实现分析:客户选择时间段,点击导出按钮,默认导出开始时间当天的数据,每个总成一个Excel,将各个Excel打 ...
- SQL SERVER 提取字符串中汉字
IF OBJECT_ID('DBO.GET_ZNSTR') IS NOT NULLDROP FUNCTION DBO.GET_ZNSTRGOCREATE FUNCTION DBO.GET_ZNSTR( ...
- POJ 3660 Cow Contest【传递闭包】
解题思路:给出n头牛,和这n头牛之间的m场比赛结果,问最后能知道多少头牛的排名. 首先考虑排名怎么想,如果知道一头牛打败了a头牛,以及b头牛打赢了这头牛,那么当且仅当a+b+1=n时可以知道排名,即为 ...
- 3ds Max制作厨房贴图和纹理实例
来源:CG游 使用软件:3ds Max 软件下载:www.xy3dsmax.com/xiazai.html 大家好,欢迎大家来阅读这个教程.这个教程是讲解我前不久制作的一个场景效果图.因为场景已经制作 ...
- 【BZOJ4940】【YNOI2016】这是我自己的发明
阅读此篇文章前请先跟我大喊三声:dllxl!dllxl!dllxl! 咳咳. 题意: Description 给一个树,n 个点,有点权,初始根是 1. m 个操作,每次操作: 1. 将树根换为 x. ...
- c++PrimerChap8IO库
#include<iostream> #include<fstream> #include<string> using namespace std; int mai ...
- Django学习之配置篇
MTV Model Template View 数据库 模版文件 业务处理 了解Django框架,功能齐全 一.安装Django&Django基本配置 安装Django pip3 django ...
- python+selenium进行简单验证码获取
# _*_ coding:utf-8 _*_from PIL import Imagefrom selenium import webdriverimport pytesseractimport ti ...