vue中使用vux datetime，数据绑定不上，重新赋值无效

冷不防 2023-07-15 02:45 11阅读 0赞

### **解决办法，刷新组件，通过v-if来创建新的组件** ###

<template>
      <div>
          <group>
            <datetime v-model="val" v-if="hackReset"></datetime>
          </group>
      </div>
    </template>
    
    <script>
    import { Group, Datetime } from 'vux'
    
    export default {
      components: {
        Group,
        Datetime
      },
      data () {
        return {
          val:'',
          hackReset: true
        }
      },
      mounted() {
         this.hackReset = false,
         this.val = '2020-03-15'
         this.$nextTick(() => {
           this.hackReset = true
         })
      }
    }
    </script>

### **原理** ###

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。  
`$nextTick` 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 `$nextTick`，则可以在回调中获取更新后的 DOM

参考文章：[https://www.jianshu.com/p/34cc4acda9ff][https_www.jianshu.com_p_34cc4acda9ff]

参考文章：[https://blog.csdn.net/sinat\_17775997/article/details/71638144][https_blog.csdn.net_sinat_17775997_article_details_71638144]

[https_www.jianshu.com_p_34cc4acda9ff]: https://www.jianshu.com/p/34cc4acda9ff
[https_blog.csdn.net_sinat_17775997_article_details_71638144]: https://blog.csdn.net/sinat_17775997/article/details/71638144

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中使用element DateTimePicker，数据绑定不上

vue中使用element DateTimePicker，数据绑定不上说明 1、DateTimePicker虽然有快捷选日期的功能，有时候需要自定义按钮就需要...

逃离我推掉我的手/ 2024年04月17日 17:07/ 0 赞/ 37 阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 274 阅读

相关关于vue中v-for绑定数据重新渲染的问题

我修改被v-for绑定的数据，发现居然不能重新渲染。查找后得知以下方法: $set 是 Vue 提供的一个全局方法，用于向响应式对象中添加或更新属性，并触发视图更新。它接

Love The Way You Lie/ 2023年10月14日 22:40/ 0 赞/ 37 阅读

相关 vue中使用vux datetime，数据绑定不上，重新赋值无效

解决办法，刷新组件，通过v-if来创建新的组件 <template> <div> <group> <dat

冷不防/ 2023年07月15日 02:45/ 0 赞/ 12 阅读

相关 Vue数据绑定

> 单向绑定模式 v-bind：之前说的指令语法只是说了一个 v-bind：及其简写模式：，但是 v-bind：是一个单向绑定模式，只能将data中的数据解析到页面上

Myth丶恋晨/ 2022年08月28日 10:54/ 0 赞/ 328 阅读

相关 Vue数据绑定

[gitHub地址:https://github.com/manlili/vue\_learn里面lesson04][gitHub_https_github.com_manli

柔情只为你懂/ 2022年06月17日 13:39/ 0 赞/ 353 阅读

相关 vue的键盘事件直接绑定无效？

![Center][] 想给搜索框加上回车事件，方便操作，但是发现，直接写在绑定事件上必须先点击一次，获取了焦点之后再次按回车键才能触发见键盘事件。错误代码： <

妖狐艹你老母/ 2022年06月07日 05:44/ 0 赞/ 395 阅读

相关 Vue 数据绑定

数据绑定就是将页面的数据和视图关联起来，当我们的数据变化的时候，视图可以自动更新。插值文本插值是数据绑定的最基本形式，使用双花括号“\{ \{ \}\}”,这种语法在

叁歲伎倆/ 2022年05月22日 11:52/ 0 赞/ 334 阅读

相关 Vue项目中使用Vux

最近想用vue+vux写一个项目，于是到vux的官网看了文档开始着手搭建项目，但是遇到一些坑。下面简单说下安装vux 的过程。默认已安装vue环境 1.安装vux

蔚落/ 2021年12月12日 12:43/ 0 赞/ 513 阅读

相关 Vue 的数据绑定

> vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的实现步骤： 1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者 2.

不念不忘少年蓝@/ 2021年09月03日 04:10/ 0 赞/ 556 阅读