问题背景

有一个父组件A：

<template><div class="app-container"><B ref="child"></B></div>
</template>
<script>
export default { created() {api(id).then( res => {this.$refs.child.data=resthis.$refs.child.data['period']=[res.startTime,res.endTime]delete this.$refs.child.data['startTime']delete this.$refs.child.data['endTime']})},methods: {}
}
</script>

子组件为：

<template><div class="app-container"><el-form label-position="right" label-width="80px" :model="formData"><el-card class="box-card" style="width:100%"><el-row><el-col><el-form-item label="时间"><el-date-pickerstyle="width:100%;"value-format="yyyy-MM-dd"v-model="formData.period"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item></el-col></el-row></el-card></el-form></div></template><script>export default {data() {return {data: {name: '',period: ['','']}}},methods: {}}</script>

问题描述

更改时间选择器后时间选择器不更新，但是实际的数据却更新了

问题原因

在父组件给子组件赋值时，首先将res赋值给child.data，但是res中并没有period属性，导致child.data中的period丢失，与组件的绑定断开，后续过程中再给child.data增加peroid属性后也无法建立绑定

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。作者：再喝奶茶我就是狗 https://www.bilibili.com/read/cv13162287?from=search 出处：bilibili

解决方法

不要让子组件的已绑定属性丢失即可

res['period']=[res.startTime,res.endTime]
delete res['startTime']
delete res['endTime']
this.$refs.child.data=res

vue绑定失效的问题（操纵组件不更新）相关推荐

【Vue学习第三天】组件的使用
整理的内容 Vue中组件的一些用法和概念创建组件父子组件传值组件的切换使用slot分发内容什么是组件组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ...
Vue — 第四天（components组件）
问题导入下面的代码是一个折叠面板的效果. <!DOCTYPE html> <html lang="en"> <head><meta ch ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
vue变量传值_VUE 学习——父组件传值给子组件
在我们编写前端代码时,经常遇到的一种场景,子组件需要使用父组件的值,这种情况下,我们可以使用props帮助我们进行父子组件间的通信.这里我们先模拟一个场景,展示如何使用. 场景:在父组件修改值,传递给 ...
（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
vue 一个组件内多个弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...

vue绑定失效的问题（操纵组件不更新）

问题背景

问题描述

问题原因

解决方法

vue绑定失效的问题（操纵组件不更新）相关推荐

最新文章

热门文章