前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于vue中input改变问题记录

关于vue中input改变问题记录

作者头像
杭州前端工程师
发布2018-06-15 11:49:10
1.4K0
发布2018-06-15 11:49:10
举报
文章被收录于专栏:前端大白专栏前端大白专栏
代码语言:javascript
复制
<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>
代码语言:javascript
复制
<script>
export default { 
data() { 
    return { 
     inputValue:'',
     textareaValue:'' } },
​​​​​​    ​}
</script>    

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

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

代码语言:javascript
复制
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(),直接调用一遍就正常了.

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档