vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了
来还原一下:
parent.vue:
<template>
<div>
<button @click="change">change</button>
<input type="text" v-model="list" name="">
<child v-for="item in list" :key="item.id" :list="item.list"></child>
</div>
</template> <script>
import child from './child.vue'
export default {
name: 'parent',
data () {
return {
list:[{id:1,type:1},{id:2,type:2},{id:3,type:3}]
}
},methods:{
change(){
console.log(this)
console.log(this.$set)
setTimeout(()=>{
this.list[1]['list'] = {a:1,b:2,c:3}
},1000)
}
},
components:{
child
},
watch:{
// list:{
// handler: function (val, oldVal) { console.log(val,oldVal) },
// deep: true
// }
},computed:{
// test:function(){
// console.log(this.list)
// return this.list
// }
}
}
</script> <style scoped>
</style>
child.vue
<template>
<div class="border">
{{list.a}}<br />
{{list.b}}<br />
{{list.c}}
</div>
</template>
<script>
export default{
props:{
list:{
default:()=>{return{a:0,b:0,c:0}}
}
},
data(){
return{
// newList:this.list
}
},
computed:{
// newList:()=>{
// console.log(this.list)
// return this.list
// }
}
}
</script>
<style>
.border{
border:1px solid #ddd;
}
</style>
我预想中的正常情况应该是点击按钮,,然后 页面上的 000 000 000 变成 000 123 000 ,
但是就是没有变化看了下 vue 文档先试试是不是子组件检测的值出了问题,
然后我在子组件中添加了 watch和 computed 结果都是无效的;
后来我搜索了页面,发了了一个全局函数 :
Vue.set();
他的效果:
Vue.set( target, key, value )
参数:
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值。
用法:
设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
终于被我找到了关键的地方了,但是在组件中怎么使用全局指令呢?
我后面又发现了 this.$set这个函数是完全一样的;
所以高兴的用上了:
正确用法:
methods:{
change(){
setTimeout(()=>{
this.list[1]['list'] = {a:1,b:2,c:3}//这样写 data 并不会检测
this.$set(this.list[1],'list',{a:1,b:2,c:3})//正确的写法
},1000)
}
这个坑,浪费了我几个小时,虽然我用 v-if 也解决了,但是总是不甘心,晚上继续研究终于让我解决了;
引以为戒;
vue 组件中数组的更新的更多相关文章
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 第七十三篇:解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- vue 组件中this指向
今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...
随机推荐
- 前端页面卡顿、也许是DOM操作惹的祸?
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
- 【计算机网络基础】数据交换技术和多路复用技术的正(nao)确(can)打开方式
交换的作用 数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么? “交换”的作 ...
- 我的第一个python web开发框架(9)——目录与配置说明
和老大聊完后,小白回家接收到相关工具函数包后,就按要求开始干活,首先要做的是熟悉配置参数和了解工具函数有哪些实用的工具. 由于这个项目比较简单,所以不用创建那么多分类,只需要api.common.co ...
- shell编程/字库裁剪(1)
我写这个帖子的意图,在于三个: 1.用代码生成代码的思维. 2.shell编程的思路. 3.裁剪字库的具体程序. 我打算分为三节来说: 第一节讲裁剪裁剪词库的意义以及使用场合: 第二节讲如何用shel ...
- struts2使用模型传值
用户bean package userBeans; public class User { private String username; public String getUsername() { ...
- 基于JavaBean编辑器读取peroperties文件
引言 最近在重读<精通Spring+4.x++企业应用开发实战>这本书,看到了有关JavaBean编辑器的部分,了解到PropertyEditor和BeanInfo的使用.不得不说,Bea ...
- JAVA基础知识总结:八
面向对象语言的三大特性;封装.继承.多态 一.面向对象语言特性之封装 1.什么是封装? 一个类中某些属性,如果不希望外界直接访问,我们可以将这个属性作为私有的,可以给外界暴露出来一个访问的方法 使用封 ...
- 树莓派.使用Node.js来制作一个作业检查仪
先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...
- git 初步
git command help file:///D:/Git/mingw64/share/doc/git-doc/git-config.html git 版本控制管理 之前并没有接触过git方面的知 ...
- 一个简单的makefile文件编写
下午闲来无聊,就打开很久没动过的linux系统想熟悉熟悉在linux上面编译代码,结果一个makefile文件搞到晚上才搞定,哈哈! 先把代码简单贴上来,就写了一个冒泡排序: sort.h: #ifn ...