关于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 条评论
登录 后参与评论

相关文章

来自专栏angularejs学习篇

angularjs学习第七天笔记(系统指令学习)

  您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令

823
来自专栏angularejs学习篇

angularjs学习第四天笔记(第一篇:简单的表单验证)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

981
来自专栏ShaoYL

Git在Xcode中的配置与使用常见问题总结

41611
来自专栏angularejs学习篇

angularjs学习第七天笔记(系统指令学习)

  您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令

901
来自专栏技术博文

可编辑DIV设置光标位置

平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他的一...

3564
来自专栏君赏技术博客

一键替换Key Mac软件的制作教程第一篇

我们要选择macOS的平台选择Cocoa Application的工程模板,点击Next.

1171
来自专栏Golang语言社区

Golang语言社区--golang 进度下载文件

大家好,我是Golang社区主编彬哥,本篇给大家转载一篇关于文件下载相关的文章。

4536
来自专栏我是业余自学C/C++的

python3网络爬虫(抓取文字信息)

8434
来自专栏V站

六个有用的 PHP 片段或技巧

网上有很多 PHP 代码片段可以提高开发效率,也可以学习一下其中的技巧而应用在自己的项目中,下面就精选了几个比较有用的 PHP 片段。

1992
来自专栏圣杰的专栏

ABP入门系列(14)——应用BootstrapTable表格插件

源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台we...

5495

扫码关注云+社区