关于vue中input改变问题记录

<template>
  <div class="page">
    <form action="" @submit="submit" @reset="resetForm">
      <inputSearch :input-value="inputValue" :inputName="word" @inputHandle='inputValueHandle'></inputSearch>
      <xnwInput :input-value="textareaValue" :inputName="explain"></xnwInput>
      <button type="primary" form-type="submit">保存</button>
    </form>
  </div>
</template>
<script>
export default { 
data() { 
    return { 
     inputValue:'',
     textareaValue:'' } },
​​​​​​    ​}
</script>    

需求是这样的, inputSearch与xnwInput是一个input的输入框,通过:input-value传入父组件里的数据,在这两个子组件中,通过v-model双向绑定各自的value值.

在输入值后改变值后,点击保存按钮需要把两个子组件里的inputValue置为空.

submit(e) {
  console.log(e);
  if(!e.target.value){
    return
  }
  // wx.removeStorage('words');
  let array = PubliceService.getStoreage('words') || [];
  let value = e.target.value;
  this.inputValue = '';
  this.textareaValue = '';
  wx.showToast({
    title:'保存成功',
    icon:'success',
    duation:1500
  });
}

问题来了:

在我点击保存按钮后,两个子组件的内容并没有被清空,为什么?

解决思路:

是没有绑定成功吗?不对,我在父组件里使用一个input,给其绑定一个onchange事件,当这个改变的时候,子组件里相应的数据也会跟着变.

后来去找了官方文档,了解了vue的运行机制,只要data里返回的数据有改变,页面就会重新render,我在想是因为我现在重置为''与之前在data里定义的''为一样,所以导致页面没有再刷新,于是找到与react一样的强制刷新页面的函数forceUpdate(),直接调用一遍就正常了.

重点不在问题 在解决思路,希望能帮到更多人

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构之路

【网络编程系列】二:socket通信原理及实践

我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或...

4666
来自专栏PHP实战技术

php+mysql实现分页代码

mysql+php实现分页 数据库设计,如图 ? <?php /** * 1.获取页数 */ $page = empty($_GET['p'])?1:($_GE...

3387
来自专栏听雨堂

Mapx用xml创建点图层

     Mapx4.*中,并不支持xml,到5以后,创建ds支持xml了,听起来很美,但是,在网上居然没有找到一个说这个的,难道mapx就没人用了吗?    ...

1778
来自专栏菩提树下的杨过

Asp.Net4.0/VS2010新变化(3):webform中也可以直接url路由

以前在做asp的时候,要把 /default.asp?id=123映射成/default/123,需要借助IISRewriter这个组件,到了asp.net以后...

17810
来自专栏大史住在大前端

javascript基础修炼(6)——前端路由的基本原理

现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,...

873
来自专栏Puppeteer学习

Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

1763
来自专栏小灰灰

SPI框架实现之旅一:背景介绍

SPI框架实现之旅一:背景介绍 SPI的全名为Service Provider Interface,简单的总结下java spi机制的思想。我们系统里抽象的各...

20210
来自专栏假装我会写代码

基于 Laravel 的用户动态模块开发

1073
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

20510
来自专栏龙渊阁测试精英

Jmeter(十九)_ForEach控制器实现网页爬虫

一直以来,爬虫似乎都是写代码去实现的,今天像大家介绍一下Jmeter如何实现一个网页爬虫! 龙渊阁测试开发家园 317765580

1353

扫码关注云+社区