今天写项目时遇到的问题,瞬间就卡在那了

来还原一下:

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 组件中数组的更新的更多相关文章

  1. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  2. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  3. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  4. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  5. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  6. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  7. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  8. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  9. vue 组件中this指向

    今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...

随机推荐

  1. 前端页面卡顿、也许是DOM操作惹的祸?

    界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现 的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...

  2. 【计算机网络基础】数据交换技术和多路复用技术的正(nao)确(can)打开方式

    交换的作用   数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么?   “交换”的作 ...

  3. 我的第一个python web开发框架(9)——目录与配置说明

    和老大聊完后,小白回家接收到相关工具函数包后,就按要求开始干活,首先要做的是熟悉配置参数和了解工具函数有哪些实用的工具. 由于这个项目比较简单,所以不用创建那么多分类,只需要api.common.co ...

  4. shell编程/字库裁剪(1)

    我写这个帖子的意图,在于三个: 1.用代码生成代码的思维. 2.shell编程的思路. 3.裁剪字库的具体程序. 我打算分为三节来说: 第一节讲裁剪裁剪词库的意义以及使用场合: 第二节讲如何用shel ...

  5. struts2使用模型传值

    用户bean package userBeans; public class User { private String username; public String getUsername() { ...

  6. 基于JavaBean编辑器读取peroperties文件

    引言 最近在重读<精通Spring+4.x++企业应用开发实战>这本书,看到了有关JavaBean编辑器的部分,了解到PropertyEditor和BeanInfo的使用.不得不说,Bea ...

  7. JAVA基础知识总结:八

    面向对象语言的三大特性;封装.继承.多态 一.面向对象语言特性之封装 1.什么是封装? 一个类中某些属性,如果不希望外界直接访问,我们可以将这个属性作为私有的,可以给外界暴露出来一个访问的方法 使用封 ...

  8. 树莓派.使用Node.js来制作一个作业检查仪

    先上图 前段时间, 花了点时间给女儿做了个数学习题的小程序 首页 做题界面(题目每次都随机生成, 加减乘除都有) 做题记录 现在问题来了, 怎么才能随时知道作业有没有完成呢? 每次打开做题记录页面刷新 ...

  9. git 初步

    git command help file:///D:/Git/mingw64/share/doc/git-doc/git-config.html git 版本控制管理 之前并没有接触过git方面的知 ...

  10. 一个简单的makefile文件编写

    下午闲来无聊,就打开很久没动过的linux系统想熟悉熟悉在linux上面编译代码,结果一个makefile文件搞到晚上才搞定,哈哈! 先把代码简单贴上来,就写了一个冒泡排序: sort.h: #ifn ...